CSS存儲在localStorage有哪些缺點呢？

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

什么是Local Storage？

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

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

Local Storage的優點

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

1、存儲容量大

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

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

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

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

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

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

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

為什么靜態資源不適合存儲在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，然后再重新填充到頁面中，這樣會阻塞一些請求同時頁面顯示體驗差。

以上就是我的觀點，對于這個問題大家是怎么看待的呢？歡迎在下方評論區交流 ~ 我是科技領域創作者，十年互聯網從業經驗，歡迎關注我了解更多科技知識！