localStorage 和 sessionStorage 簡介

導讀

1、 簡述

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

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

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

2、 相同點

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

3、 不一樣點

3.1 生命週期

• localStorage 存儲的數據是永久性的，除非用戶人爲刪除不然會一直存在(調用 localStorage api 或則清除瀏覽器數據)。

• sessionStorage 存儲的數據在當前會話結束時會被清除，一旦窗口或者標籤頁被關閉，那麼全部經過 sessionStorage 存儲的數據也會被刪除。

3.2 做用域

• localStorage: 在同一個瀏覽器內，同源文檔之間共享 localStorage 數據，能夠互相讀取、覆蓋、清除(同瀏覽器限制、同源限制)

• sessionStorage: 與 localStorage 同樣須要同一瀏覽器同源文檔這一條件。除此以外 sessionStorage 的做用域還被限定在了窗口中，也就是說，只有同一瀏覽器、同一窗口的同源文檔才能共享數據(同瀏覽器限制、同源限制、同標籤頁限制)

4、 操做

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

4.1 新增、修改

• 經過 setItem 添加、修改數據

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

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

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

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

)

4.2 獲取數據

• 經過 getItem 獲取數據

sessionStorage.getItem('user')
複製代碼

• 經過對象的形式獲取數據

sessionStorage.user
複製代碼

• 經過 length 屬性存儲數量

// 經過 getItem('legnth') 返回的結果爲 null， 只能經過對象形式獲取 length 值
sessionStorage.length
複製代碼

4.3 移除數據

• 經過 removeItem 移除指定數據

sessionStorage.removeItem('user');
複製代碼

• 經過對象的形式移除指定數據

delete sessionStorage.user
複製代碼

• 移除當前做用域下全部數據

sessionStorage.clear();
複製代碼