JS:存儲數據用哪個?localStorage、sessionStorage有什麼區別?

進入我的主頁，查看更多JS的分享！我的代碼有多短，本篇內容就有多短！

對比cookie：

cookie會與伺服器通信；storage只存在客服端，不參與伺服器通信；同樣受同源策略影響，只有在域名一致的情況下才能查看到對應的數據；navigator.cookieEnabled檢測是否啟用了cookie，也就說cookie可以認為控制是否啟用，而storage則是自動啟用，不會被人為關閉。（比如隱私模式下）一、localStorage - 沒有時間限制的數據存儲

知識點：

存儲 key/value 對的數據；保存的數據沒有過期時間，直到手動去刪除（包括清空瀏覽器緩存）；拓展了 cookie 的 4K 限制，可存儲的容量，各瀏覽器的大小不統一；只支持 string 類型的存儲（目前所有的瀏覽器中都會把localStorage的值類型限定為string類型），比如數字，存儲後變為字符串；在瀏覽器的隱私模式下面是不可讀取的；本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡；不能被爬蟲抓取到語法：setItem(key,value)、getItem(key)、removeItem(key)使用演示：

//定義Keyconst userk = "uk2020";const tokenk = "tk2020";const objK = "ok2020";//存儲localStorage.setItem(userk, "以氣御碼");localStorage.setItem(tokenk, "14332239527007001");localStorage.setItem(objK, { ids: 996, title: "世界還在，我在加班"});//讀取let userName = localStorage.getItem(userk);let token = localStorage.getItem(tokenk);let obj = localStorage.getItem(objK);console.log(userName, token, obj);//輸出：以氣御碼 14332239527007001 [object Object]在瀏覽器的開發者工具，Application可以查看：

存儲結構一目了然，值自動轉為字符串，因此數組、對象數據的存儲，一般需要轉換：

//轉換 JSON格式的字符串localStorage.setItem(objK, JSON.stringify({ ids: 996, title: "世界還在，我在加班" }));//獲取 let obj = localStorage.getItem(objK);console.log(JSON.parse(obj));//輸出{ ids: 996 title: "世界還在，我在加班"}也可以搭配URIComponent使用：

//轉換localStorage.setItem(objK, encodeURIComponent(JSON.stringify({ ids: 996, title: "世界還在，我在加班" })));//獲取let obj = localStorage.getItem(objK);console.log(JSON.parse(decodeURIComponent(obj)));參考文檔(菜鳥教程:https://www.runoob.com/jsref/prop-win-localstorage.html)

二、sessionStorage

知識點：

針對一個 session 的數據存儲，即臨時存儲，窗口關閉就會被清除（不是瀏覽器被關閉哦）；在瀏覽器的隱私模式下面是不可讀取的；語法：setItem(key,value)、getItem(key)、removeItem(key)使用方式與localStorage是一樣的：

//Keyconst userk = "uk2020";const tokenk = "tk2020";const objK = "ok2020";//存儲sessionStorage.setItem(userk, "以氣御碼");sessionStorage.setItem(tokenk, "14332239527007001");sessionStorage.setItem(objK, encodeURIComponent(JSON.stringify({ ids: 996, title: "世界還在，我在加班"})));//獲取let userName = sessionStorage.getItem(userk);let token = sessionStorage.getItem(tokenk);let obj = sessionStorage.getItem(objK);console.log(userName, token, JSON.parse(decodeURIComponent(obj)));三、各瀏覽器的兼容性代碼

這裡就不貼代碼了，因為是文檔上有的（放在下面了），在離開之前記得點個讚咩！

參考文檔(MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Storage/LocalStorage)