進入我的主頁,查看更多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)