摘要：存儲大小一般瀏覽器支持的是大小，不同瀏覽器會有所不同。一般我們會將存入中，但是在會自動將轉(zhuǎn)換成為字符串形式。即可得到存儲的值，實現(xiàn)不同標(biāo)簽頁之間的通信。和對比和的區(qū)別屬于永久性存儲，而屬于當(dāng)前會話結(jié)束的時候，中的鍵值對會被清空。

存儲大?。阂话銥g覽器支持的是5M大小，不同瀏覽器會有所不同。

是H5的新特性，兼容性不是很好。

目前所有的瀏覽器都會把localStorage的值類型限定為string類型，這個在對我們?nèi)粘１容^常見的JSON對象類型需要一些轉(zhuǎn)換。

localStorage在瀏覽器的隱私模式下是不可讀取的。

localStorage 本質(zhì)上是對字符串的讀取，如果存儲內(nèi)容多，會消耗內(nèi)存空間，會導(dǎo)致頁面變卡。

localStorage不會被爬蟲抓取到。

localStorage只支持string類型的存儲。一般我們會將JSON存入localStorage中，但是在localStorage會自動將localStorage轉(zhuǎn)換成為字符串形式。這個時候我們可以使用JSON.stringify()這個方法，來將JSON轉(zhuǎn)換成為JSON字符串。讀取之后要將JSON字符串轉(zhuǎn)換成為JSON對象，使用JSON.parse()方法:

let storage = window.localStorage;
let data = {
      name: "aaa",
      sex: "man",
      hobby: "program"
};
let dataString = JSON.stringify(data);
storage.setItem("data", dataString);
let json = storage.getItem("data");
let jsonObj = JSON.parse(json);
console.log("json", json);
console.log("jsonObj", jsonObj);
console.log("ffffdd", typeof jsonObj);

方法和屬性：

添加鍵值對：setItem(key, value);

獲取鍵值對：getItem(key);

刪除鍵值對：removeItem(key);

清除所有鍵值對：clear();

獲取鍵名稱：key(index);

（屬性）獲取localStorage中保存的鍵值對的數(shù)量：length。

獲取鍵值對：

for (let i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage.getItem(key);
}

事件：

storage事件：瀏覽器在localStorage數(shù)據(jù)變化（真正的發(fā)生變化）之后給你的一個通知。

包含的屬性：

storageArea: 表示存儲類型（session或local）

key：發(fā)生改變項的key

oldValue：key的原值

newValue: key的新值

url: key 改變發(fā)生的URL（有些早期版本中使用的是uri屬性）

這個事件兼容性好像不好，要少用。

localStorage存儲的數(shù)據(jù)是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的數(shù)據(jù)，儲存空間5M.

如何實現(xiàn)兩個標(biāo)簽頁的數(shù)據(jù)交互：

調(diào)用localStorage：

在一個標(biāo)簽頁里面使用 localStorage.setItem(key,value)添加（修改、刪除）內(nèi)容；在另一個標(biāo)簽頁里面監(jiān)聽 storage 事件。即可得到 localstorge 存儲的值，實現(xiàn)不同標(biāo)簽頁之間的通信。

將要傳遞的信息存儲在cookie中，每隔一定時間讀取cookie信息，即可隨時獲取要傳遞的信息。

localStorage屬于永久性存儲，而sessionStorage屬于當(dāng)前會話結(jié)束的時候，sessionStorage中的鍵值對會被清空。

https://www.jianshu.com/p/e4e...

https://www.jianshu.com/p/e3d...

https://segmentfault.com/a/11...

https://segmentfault.com/a/11...

https://www.jianshu.com/p/707...

https://juejin.im/post/5aede2...