localStorage 和 sessionStorage 介紹

一、 簡述

sessionStorage 和 sessionStorage 是 HTML5 新增的兩個特性，這兩個特性主要是用來作為會話存儲和本地存儲來使用的，解決了 cookie 存儲空間不足的問題；

sessionStorage 屬性允許你訪問一個 session Storage 對象，用於存儲當前會話的數據，存儲在 sessionStorage 裡面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，並且重新加載或恢復頁面仍會保持原來的頁面會話。

localStorage 屬性允許你訪問一個 Document 源(origin)的對象 Storage 用於存儲當前源的數據，除非用戶人為清除(調用 localStorage api 或則清除瀏覽器數據)， 否則存儲在 localStorage 的數據將被長期保留。

二、 相同點

1. 存儲大小一般均為5M左右
2. 都有同源策略限制，跨域無法訪問
3. 數據僅在客戶端中保進行存儲，並不參與和服務器的通信(不會隨著 http 請求發送到服務器)
4. 以 key 和 value 的形式進行存儲數據， value 值必須為字符串，不為字符串會自動轉型( value 如果是對象則需要轉為 json 進行存儲)

三、 不同點

3.1 生命週期

• localStorage 存儲的數據是永久性的，除非用戶人為刪除否則會一直存在(調用 localStorage api 或則清除瀏覽器數據)。
• sessionStorage 存儲的數據在當前會話結束時會被清除，一旦窗口或者標籤頁被關閉，那麼所有通過 sessionStorage 存儲的數據也會被刪除。

3.2 作用域

• localStorage: 在同一個瀏覽器內，同源文檔之間共享 localStorage 數據，可以互相讀取、覆蓋、清除(同瀏覽器限制、同源限制)
• sessionStorage: 與 localStorage 一樣需要同一瀏覽器同源文檔這一條件。除此之外 sessionStorage 的作用域還被限定在了窗口中，也就是說，只有同一瀏覽器、同一窗口的同源文檔才能共享數據(同瀏覽器限制、同源限制、同標籤頁限制)

四、 操作

sessionStorage localStorage 在操作上沒什麼區別，下面以 sessionStorage 為例：

4.1 新增、修改

• 通過 setItem 添加、修改數據

<code>sessionStorage.setItem('name', 'qianyin');
sessionStorage.setItem('name', 'linheng');
sessionStorage.setItem('user1', {name: 'qianyin'});
sessionStorage.setItem('user2', JSON.stringify({name: 'qianyin'}));
複製代碼/<code>

• 通過對象的形式添加、修改數據

<code>sessionStorage.name = 'qianyin';
sessionStorage.name = 'linheng';
sessionStorage.user1 = {name: 'qianyin'};
sessionStorage.user2 = JSON.stringify({name: 'qianyin'})
複製代碼/<code>

• 通過瀏覽器(chrome)控制檯查看數據: