淺談瀏覽器緩存-2016

前(fei)言(hua)：新年第一篇文章， 這一博文代碼準備許久奈何以前比較忙，春節後這幾天有空總結下瀏覽器緩存。

瀏覽器緩存歷史簡介

瀏覽器緩存實現一開始各家瀏覽器廠商標配的都是Cookies， 隨着前端顯示愈來愈複雜，Cookies那可憐的幾K容量明顯不夠用了；在2000年至2008年間，沒有統一標準出現了不少瀏覽器緩存的插件實現如：Flash SharedObject ，Google Gears；HTML5標準的提出，出現了不少緩存的標準如：localstorage ，webSql ，IndexDb；HTML5大熱的時候，離線Web應用市場一度被看好，相應的瀏覽器緩存技術也備受關注；大熱後的今天， 咱們慢下來靜靜的總（tu）結（cao）下瀏覽器的那些緩存技術。(HTML5 標準2006年提出，2014年才正式發佈，提出約兩年後開始被重視)

瀏覽器緩存實踐

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的數據都是這樣的：

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仍是主流的選擇；固然，瀏覽器端存儲的數據容量畢竟有限，大數據仍是得後臺加載，分頁或懶加載顯示；

 

本文源碼：
demo源碼
參考文章：
各瀏覽器cookie大小、個數限制；
webSql官方文檔；
indexDb使用詳解；