進入我的主頁救鲤，查看更多JS的分享！
我的代碼有多短秩冈，本篇內(nèi)容就有多短本缠！
對比cookie：
- cookie會與服務(wù)器通信；storage只存在客服端漩仙，不參與服務(wù)器通信搓茬；
- 同樣受同源策略影響犹赖，只有在域名一致的情況下才能查看到對應(yīng)的數(shù)據(jù)队他；
- navigator.cookieEnabled檢測是否啟用了cookie，也就說cookie可以認(rèn)為控制是否啟用峻村，而storage則是自動啟用麸折，不會被人為關(guān)閉。（比如隱私模式下）
一粘昨、localStorage - 沒有時間限制的數(shù)據(jù)存儲
知識點：
- 存儲 key/value 對的數(shù)據(jù)垢啼；
- 保存的數(shù)據(jù)沒有過期時間窜锯，直到手動去刪除（包括清空瀏覽器緩存）；
- 拓展了 cookie 的 4K 限制芭析，可存儲的容量锚扎，各瀏覽器的大小不統(tǒng)一；
- 只支持 string 類型的存儲（目前所有的瀏覽器中都會把localStorage的值類型限定為string類型）馁启，比如數(shù)字驾孔，存儲后變?yōu)樽址?/li>
- 在瀏覽器的隱私模式下面是不可讀取的；
- 本質(zhì)上是對字符串的讀取惯疙，如果存儲內(nèi)容多的話會消耗內(nèi)存空間翠勉，會導(dǎo)致頁面變卡；
- 不能被爬蟲抓取到
- 語法：setItem(key,value)霉颠、getItem(key)对碌、removeItem(key)
使用演示：
//定義Key
const 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]
在瀏覽器的開發(fā)者工具蒿偎，Application可以查看：
存儲結(jié)構(gòu)一目了解朽们，值自動轉(zhuǎn)為字符串，因此數(shù)組诉位、對象數(shù)據(jù)的存儲华坦，一般需要轉(zhuǎn)換：
//轉(zhuǎn)換 JSON格式的字符串
localStorage.setItem(objK, JSON.stringify({ ids: 996, title: "世界還在，我在加班" }));
//獲取
let obj = localStorage.getItem(objK);
console.log(JSON.parse(obj));
//輸出
{
ids: 996
title: "世界還在不从，我在加班"
}
也可以搭配URIComponent使用：
//轉(zhuǎn)換
localStorage.setItem(objK, encodeURIComponent(JSON.stringify({ ids: 996, title: "世界還在惜姐，我在加班" })));
//獲取
let obj = localStorage.getItem(objK);
console.log(JSON.parse(decodeURIComponent(obj)));
二、sessionStorage
知識點：
- 針對一個 session 的數(shù)據(jù)存儲椿息，即臨時存儲歹袁，窗口關(guān)閉就會被清除（不是瀏覽器被關(guān)閉哦）；
- 在瀏覽器的隱私模式下面是不可讀取的寝优；
- 語法：setItem(key,value)条舔、getItem(key)、removeItem(key)
使用方式與localStorage是一樣的：
//Key
const 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 localStorage
