瞭解HTML5的朋友們應該都知道它較HTML4有很多改進，也新增了很多特性，而本地儲存Local Storage就是其中一種。但是目前不少網站使用Local Storage技術的並不多，應用不是太廣泛。

Local Storage作為HTML5的本地儲存方案，它適合做一些離線資料的儲存，在Local Storage之前如果要本地儲存大家選擇的就是Cookie，而Cookie儲存資料容量很小（4K左右），而且Cookie會作為請求頭的一部分傳遞到伺服器端，所以Cookie太多的話會影響請求速度的！

而Local Storage本地儲存和Cookie不同，它可以儲存大量資料（5M左右），所以對於較大的資料建議大家使用Local Storage來儲存。

Local Storage本地儲存具有很多優點，最主要的有：

1、儲存容量大

與Cookie相比，雖然Local Storage不同瀏覽器的支援程度不同，一般情況下它可以儲存5M左右的資料。

2、在客戶端儲存不會影響伺服器端

Local Storage儲存在客戶端瀏覽器中，與Cookie不同的是它不會和伺服器端進行通訊。

3、遵循同源策略，安全性高

它也有同源策略，不同站點是無法共用Local Storage的，所以安全性還行。

4、永久性儲存，無過期時間

和Cookie不同的是，Local Storage資料是永久性儲存的，只要使用者不主動清理是不會過期的，儲存時間長。

如上面所說，Local Storage有那麼多的優點，那在現實開發中為什麼沒有人把CSS和JS這類檔案儲存到Local Storage中呢？其實也就是Local Storage的特性使得它不適合儲存文件內容，為啥呢？我總結的原因主要是：

1、Local Storage是儲存在硬碟上的，大檔案I/O操作效能並不好

我們說Local Storage裡儲存的都是字串型別的資料，如果儲存的內容過多則記憶體空間消耗較大，頁面容易卡頓。

2、瀏覽器支援程度不同

不同瀏覽器對於Local Storage的支援程度不同，如果還要對不同瀏覽器做相容處理，那代價就大了。

3、客戶端儲存並不可靠

如果把CSS/JS等靜態資源儲存在客戶端，那意味著使用者可以隨意修改Local Storage的內容，萬一使用者把它清空了那頁面顯示就會出問題。

4、客戶端資料更新是個問題

如果把靜態資源存入本地儲存中，萬一這些靜態資源更新了，那客戶端無法有效的更新，這個問題就很嚴重！

5、使用者體驗差

如果將靜態資源存入Local Storage中，那我們在文件載入後利用JS來讀取Local Storage中的CSS或者JS，然後再重新填充到頁面中，這樣會阻塞一些請求同時頁面顯示體驗差。