淺談瀏覽器緩存

瀏覽器緩存歷史簡介

瀏覽器緩存實現一開始各家瀏覽器廠商標配的都是Cookies， 隨著前端顯示越來越複雜，Cookies那可憐的幾K容量明顯不夠用了；在2000年至2008年間，沒有統一標準出現了很多瀏覽器緩存的插件實現如：

瀏覽器緩存實踐

Adobe 插件存儲（Flash SharedObject）跟Google插件存儲（Gears SQLite）均需要安裝插件且本人沒使用過，暫時不寫，日後有機會接觸再補上；本文主要寫HTML5離線存儲標準實踐以及實際開發中瀏覽器緩存的實現方案，因本文Demo代碼量比較大，故主要貼上實現的核心代碼；

1.localStorage、sessionStorage 是HTML5 規範，IE8就支持了，不同瀏覽器總大小不同，大概為5MB；

localStorage和sessionStorage的API都相同（用法一樣），區別只在於關閉瀏覽器選項卡時sessionStorage的數據會消失而localStorage的會保留；用法灰常簡單：

保存數據：

setItem('key', 'keyValue');

獲得數據：

getItem('key');

刪除數據：

removeItem('key', 'keyValue');

或

clear();

谷歌、safari(舊版)以及大部分國產瀏覽器的極速模式查看localStorage、sessionStorage的數據都是這樣的：

2. Cookies 比較老的緩存實現方式，不同瀏覽器支持的Cookie 個數跟容量不同，容量大概4K;（各瀏覽器Cookie大小、個數限制）

Cookies用法相對於上述的localStorage會比較麻煩，因為緩存數據的增、刪、改、查都是操作同一段字符串；關鍵代碼:

document.cookie = 'xxx';

Cookie數據保存的時間、保存的路徑、域名等都通過字符串拼接操作實現；PS: 部分瀏覽器（如chrome）需要部署在虛擬服務器才能操作Cookie；

3.userData(只有IE瀏覽器支持)， Flash、Gears這類需要安裝插件的緩存應用場景比較有限，本文不展開研究了，但考慮到國內IE瀏覽器的使用份額，userData比以上同時期兩貨實用的多，所以有必要展開下；

userData的實現就是頁面加載時創建一個input標籤，該標籤首先調用：

load('file_name');

在C盤目錄（路徑下面詳述）生成xml文件，然後用戶交互產生的緩存數據通過給input標籤添加（或刪除）屬性存儲：

setAttribute('key', 'keyValue');

removeAttribute('key');

添加（或刪除）屬性後調用'save'方法就將結果保存到對應的xml文件了：

save('file_name');

userData存儲的位置：

在XP下，一般位於C:\Documents and Settings\用戶名\UserData，有些時候會在C:\Documents and Settings\用戶名\Application Data\Microsoft\Internet Explorer\UserData。

在Vista下，位於C:\Users\用戶名\AppData\Roaming\Microsoft\Internet Explorer\UserData。

PS: 使用userData時， 清空瀏覽器所有緩存都無法清除userData存儲的數據，需要到上述文件夾下手動刪除對應的xml文件才能清除成功；

4.webSql HTML5新增緩存機制，IE所有版本（包括edge） firefox均不支持， PC端目前基本無法投入使用；Web SQL Database

這麼多瀏覽器不支持該標準的原因估計是API太複雜了！！！以下是它實現插入緩存代碼，體驗下：

基本是將sqlserver 、mysql那一套的語法拿過來了， 但偏偏前端瀏覽器又沒辦法實現如mysql那麼強大的功能， 沒有公主命卻一身公主病；支持該方案的只有了chrome 、 safari ：

PS: w3c 已表示不再維護，indexDb代替之。

5.IndexDb HTML5規範的另一緩存機制， 瀏覽器支持情況比websql好一些； IE10(edge14仍是部分支持)開始部分支持， firefox、chrome、Opera全支持、safari8開始部分支持；實際開發同上，暫時雞肋；

上述的 webSql 基本成歷史， IndexDb將代替它繼續更新；但本人對它未來還是挺悲觀的，為啥？如果說有哪個緩存標準的API比webSql難用 那一定是 IndexDb！

跟Cookie、localStorage實現相同功能它的代碼是這樣的：

上述代碼僅僅是存入數據而已， 還有跟它同等長度的查詢、插入代碼；（indexDb增刪改查的詳細操作代碼請看demo源碼）總的來說該標準API對開發者及不友好；存入成功後，查看存儲數據：

PS: 網上很多教程中的db.setVersion方法已被棄用，IndexDb標準最新版沒有 setVersion 了，現在是 onupgradeneeded !

實際開發中，緩存使用：cookiesUtils、localStorageUtils

cookiesUtils： Cookie存儲實現都是將參數拼接成字符串然後將字符串賦值給“document.cookie”， 實際項目中不可能經常拼接，所以都使用封裝的Cookie庫；附上本人寫的cookiesUtils；

localStorageUtils：實際項目中另一常用的存儲方案就是localStorage， 比Cookie好用且兼容大部分瀏覽器; 就目前而言唯一的不足是不兼容IE6 IE7， 如結合上述的userData將兼容所有瀏覽器，在低版本IE瀏覽器中使用userData實現localStorage方法，localStorageUtils就是這樣的封裝實現；

總結

HTML5 眾多存儲方案中，目前使用最為廣泛的當然是 localstorage、sessionStorage了， 如考慮低版本瀏覽器，Cookies還是主流的選擇；當然，瀏覽器端存儲的數據容量畢竟有限，大數據還是得後臺加載，分頁或懶加載顯示；

閱讀更多 前端小學生 的文章

關鍵字: Google HTML5 Flash