sessionStorage、localStorage詳解

webstorage是本地儲存，儲存在客戶端，包括localStorage和sessionStorage。在JavaScript語言中可通過 window.sessionStorage 或 sessionStorage 呼叫此物件。

localStorage

localStorage生命週期是永久，這意味著除非使用者顯示在瀏覽器提供的UI上清除localStorage資訊，否則這些資訊將永遠存在。存放資料大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊。

sessionStorage

sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器後被清除。存放資料大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊。源生介面可以接受，亦可再次封裝來對Object和Array有更好的支援。

localStorage和sessionStorage的區別：

(1)、localStorage和sessionStorage一樣都是用來儲存客戶端臨時資訊的物件。

(2)、他們均只能儲存字串型別的物件（雖然規範中可以儲存其他原生型別的物件，但是目前為止沒有瀏覽器對其進行實現）。

(3)、localStorage生命週期是永久，這意味著除非使用者顯示在瀏覽器提供的UI上清除localStorage資訊，否則這些資訊將永遠存在。sessionStorage生命週期為當前視窗或標籤頁，一旦視窗或標籤頁被永久關閉了，那麼所有通過sessionStorage儲存的資料也就被清空了

(4)、不同瀏覽器無法共享localStorage或sessionStorage中的資訊。localStorage相同瀏覽器的不同頁面間可以共享相同的localStorage（頁面屬於相同域名和埠），但是不同頁面或標籤頁間無法共享sessionStorage的資訊。這裡需要注意的是，頁面及標籤頁僅指頂級視窗，如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是可以共享sessionStorage的。

(5)、

http://www.test.com

https://www.test.com （不同源，因為協議不同）

http://my.test.com（不同源，因為主機名不同）

http:
 
//www.test.com:8080（不同源，因為埠不同）

localStorage、和sessionStorage的用法:

localStorage和sessionStorage使用時使用相同的API：

1、屬性

sessionStorage.length ：返回一個整數，表示儲存在 sessionStorage 物件中的資料項(鍵值對)數量。

2、方法

• 方法 sessionStorage.key(int index) ：返回當前 sessionStorage 物件的第index序號的key名稱。若沒有返回null。

• 方法 sessionStorage.getItem(string key) ：返回鍵名(key)對應的值(value)。若沒有返回null。

• 方法 sessionStorage.setItem(string key, string value) ：該方法接受一個鍵名(key)和值(value)作為引數，將鍵值對新增到儲存中；如果鍵名存在，則更新其對應的值。

• 方法 sessionStorage.removeItem(string key) ：將指定的鍵名(key)從 sessionStorage 物件中移除。

• 方法 sessionStorage.clear() ：清除 sessionStorage 物件所有的項。

儲存Json物件:

sessionStorage也可儲存Json物件：儲存時，通過JSON.stringify()將物件轉換為文字格式；讀取時，通過JSON.parse()將文字轉換回物件。

var userEntity = {

    name: 'tom',

    age: 22

};

// 儲存值：將物件轉換為Json字串

sessionStorage.setItem('user', JSON.stringify(userEntity));

// 取值時：把獲取到的Json字串轉換回物件

var userJsonStr = sessionStorage.getItem('user');

userEntity = JSON.parse(userJsonStr);

console.log(userEntity.name); // => tom

儲存陣列物件:

sessionStorage不可以直接儲存陣列物件，需要先把陣列物件轉化為JSON物件，再用JSON物件去儲存

var userEntity = {
    tempArr:[1,2,3,4,5,6,7,8,9]
};

// 儲存值：將物件轉換為Json字串

sessionStorage.setItem('arr', JSON.stringify(userEntity));

// 取值時：把獲取到的Json字串轉換回物件

var userJsonStr = sessionStorage.getItem('arr');

userEntity = JSON.parse(userJsonStr);

console.log(userEntity.tempArr); // => [1,2,3,4,5,6,7,8,9]

參考資料：

1. https://www.cnblogs.com/polk6/p/5512979.html#Menu3_3-SetOfJson

2. https://segmentfault.com/a/1190000012057010

3. http://blog.csdn.net/kerryqpw/article/details/71439104