localstorage的那些事

html5中 web storage 的出現，主要是為了彌補使用 cookie 作為本地儲存的不足。cookie 儲存的資料量非常小，而且資料會自動攜帶到請求頭里，但伺服器端可能並不關心這些資料，所以會造成頻寬的浪費。

web storage 提供了兩個儲存物件：localstorage 和 sessionstorage。

sessionstorage 儲存的資料僅在本次會話有用，會話結束後會自動失效，而且資料僅在當前視窗有效，同一源下新視窗也訪問不到其他視窗基於

sessionstorage 儲存的資料。也是由於這些特性，導致 sessionstorage 的使用場景會比較少。

localstorage 可以永久儲存，而且同源下資料多視窗也能共享，。看起來很美好，但 localstorage 也有短板，絕大多數瀏覽器有 5m 的大小限制。但是這不足以成為大家使用 localstorage 的障礙，要知道 cookie 只有 4k 的大小，多了一千多倍，偷著樂吧。

講這個內容的文章網上太多了，現在再來講有點老套了。這裡就不做更多介紹了，不清楚的讀者可以看這裡。

有兩點需要注意一下。在setitem時，可能會達到大小限制，最好加上錯誤捕捉 1

：

try  catch(e) 
}function
isquotaexceeded(e) 
break;
}} else
if (e.number === -2147024882) 
} return quotaexceeded;
}

另外在儲存容量快滿時，會造成getitem效能急劇下降 2

。我們下面看看 localstorage 有哪些腦洞大開的用法。

http 協議的快取，可以由使用者瀏覽器清除或禁用快取，也可以由 web 伺服器設定過期時間或不快取。對於前端工程師，這更像是乙個黑盒，想要決定檔案是訪問快取還是訪問遠端顯得有些力不從心了。

使用 localstorage 控制檔案快取的方式有兩種：

使用 loader 載入靜態檔案

借助伺服器端將靜態檔案 inline 化

這兩種方式一般都會提前做好快取過期策略，通常是使用版本號來控制，下面還會細講。否則檔案新版上線，使用者客戶端還是舊版，這就麻煩大了，而且這類問題，還不好除錯不好重現。

由於請求都是動態發出的，所以可以對請求攔截處理。大致流程如下：

檢視請求的檔案 url 是否有快取到 localstorage

如果沒有，到第 2 大步

如果有，判斷檔案是否過期或版本號是否匹配

過期或不匹配，到第 2 大步

檔案內容有效，到第 4 大步

請求遠端檔案

快取最新檔案內容

執行檔案內容

這個方式有個開源庫：basket.js。

這個方式比上面那種更進一步，在第一次響應時把需要放入 localstorage 的檔案都內聯進 html 中，後面每次響應只要檔案版本沒有變化，都是渲染一段從 localstorage 載入該檔案的**。這樣做的好處是可以有效減少請求次數，即使是第一次。

版本號不匹配（版本號可記在 cookie 中，第一次訪問沒有版本號），服務端響應內容：