sessionStorage 是HTML5新增的一個會話儲存物件，用於臨時儲存同一視窗(或標籤頁)的資料，在關閉視窗或標籤頁之後將會刪除這些資料。本篇主要介紹 sessionStorage(會話儲存)的使用方式。包括新增、修改、刪除等操作。

目錄

1. 介紹

　　1.1 說明

　　1.2 特點

　　1.4 適合場景

2. 成員

　　2.1 屬性

　　2.2 方法

3. 示例

　　3.1 儲存資料

　　3.2 讀取資料

1. 介紹 

1.1 說明

sessionStorage 是HTML5新增的一個會話儲存物件，用於臨時儲存同一視窗(或標籤頁)的資料，在關閉視窗或標籤頁之後將會刪除這些資料。

在JavaScript語言中可通過 window.sessionStorage 或 sessionStorage 呼叫此物件。

1.2 特點

1) 同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協議、同一主機名和同一埠下。(IE 8和9儲存資料僅基於同一主機名，忽略協議（HTTP和HTTPS）和埠號的要求)

2) 單標籤頁限制。sessionStorage操作限制在單個標籤頁中，在此標籤頁進行同源頁面訪問都可以共享sessionStorage資料。

3) 只在本地儲存。seesionStorage的資料不會跟隨HTTP請求一起傳送到伺服器，只會在本地生效，並在關閉標籤頁後清除資料。(若使用Chrome的恢復標籤頁功能，seesionStorage的資料也會恢復)。

4) 儲存方式。seesionStorage的儲存方式採用key、value的方式。value的值必須為字串型別(傳入非字串，也會在儲存時轉換為字串。true值會轉換為"true")。

5) 儲存上限限制：不同的瀏覽器儲存的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下。

1.3 瀏覽器最小版本支援

支援sessionStorage的瀏覽器最小版本：IE8、Chrome 5。

1.4 適合場景 

sessionStorage 非常適合SPA(單頁應用程式)，可以方便在各業務模組進行傳值。

2. 成員

2.1 屬性

 readonly int sessionStorage.length

2.2 方法

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

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

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

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

 void sessionStorage.clear() ：清除 sessionStorage 物件所有的項。

3. 示例

3.1 儲存資料

3.1.1 採用setItem()方法儲存

sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值

3.1.2 通過屬性方式儲存　　

sessionStorage['testKey'] = '這是一個測試的value值';

3.2 讀取資料

3.2.1 通過getItem()方法取值

sessionStorage.getItem('testKey'); // => 返回testKey對應的值

3.2.2 通過屬性方式取值

sessionStorage['testKey']; // => 這是一個測試的value值

3.3 儲存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