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

存儲大小：一般瀏覽器支持的是5M大小，不同瀏覽器會有所不同。

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

目前所有的瀏覽器都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換。

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

localStorage 本質上是對字符串的讀取，如果存儲內容多，會消耗內存空間，會導致頁面變卡。

localStorage不會被爬蟲抓取到。

localStorage只支持string類型的存儲。一般我們會將JSON存入localStorage中，但是在localStorage會自動將localStorage轉換成為字符串形式。這個時候我們可以使用JSON.stringify()這個方法，來將JSON轉換成為JSON字符串。讀取之后要將JSON字符串轉換成為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中保存的鍵值對的數量：length。

獲取鍵值對：

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

事件：

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

包含的屬性：

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

key：發生改變項的key

oldValue：key的原值

newValue: key的新值

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

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

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

如何實現兩個標簽頁的數據交互：

調用localStorage：

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

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

localStorage屬于永久性存儲，而sessionStorage屬于當前會話結束的時候，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...