網站頁面間腳本傳值 sessionStorage

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]

參考資料：

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

https://segmentfault.com/a/1190000012057010

http://blog.csdn.net/kerryqpw/article/details/71439104
版權聲明： https://blog.csdn.net/qq_30868289/article/details/79582280