web瀏覽器數據本地存儲

在瀏覽器中存儲主要分為以下三種方式

1. localstorage 2、sessionStorage 3、cookie

localStorage

生命周期永久，除非用戶清除瀏覽器中的localStorage信息，否則永遠存在；

存放數據大小一般為5MB；

僅在瀏覽器中保存，不參與伺服器通信；

API調用：

localStorage.setItem("key","value");//以「key」為名稱存儲一個值「value」

localStorage.getItem("key");//獲取名稱為「key」的值

localStorage.removeItem("key");//刪除名稱為「key」的信息。

localStorage.clear();?//清空localStorage中所有信息

sessionStorage

僅在當前會話下有效，關閉頁面或者瀏覽器後被清除；

存放數據大小一般為5MB；

僅在瀏覽器中保存，不參與伺服器通信；

可以接受源生介面，亦可以再次封裝來對Object和Array有更好的支持；

API調用：

sessionStorage.setItem("key","value");//以「key」為名稱存儲一個值「value」

sessionStorage.getItem("key");//獲取名稱為「key」的值

sessionStorage.removeItem("key");//刪除名稱為「key」的信息。

sessionStorage.clear();?//清空sessionStorage中所有信息

Cookie

生命周期為在cookie設置的過期時間之前一直有效，即使窗口或者瀏覽器關閉；

存放數據大小為4K；

有存儲個數限制（各瀏覽器不同），一般不超過20個；

與伺服器端通信，每次都會攜帶在HTTP頭中，cookie存儲數據過多會帶來性能問題；

localStorage與sessionStorage區別

我經常用到的存儲方式為前兩種，因此需要清楚了解它們之間的區別。

localStorage與sessionStorage的API調用方法相同；

不同瀏覽器無法共享localStorage或sessionStorage中的信息；

相同瀏覽器的不同頁面可以共享相同的localStorage（前提是頁面屬於相同域名和埠）；

相同瀏覽器的不同頁面無法共享sessionStorage的信息；

需要注意的是：頁面及標籤頁僅指頂級窗口，如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是可以共享sessionStorage的。這句話的意思是說在當前頁面打開的鏈接和頁面，可以訪問sessionStorage的數據，或者說在當前頁面關聯的src鏈接也可以獲取到sessionStorage數據。

我的應用場景

1、用vue做的後台管理平台，允許打開多個頁面，不同頁面可登陸不同的用戶，用戶之間互不干擾。

結合上述信息與要求，如果使用localStorage，因為相同域名和埠，會導致不同頁面數據共享，從而引發混亂。如果採用sessionStorage，不同頁面即可保證互不干擾，且vue為SPA，無需打開新的頁面，因此不會相互干擾。實測可行。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！