HTML5 sessionStorage會話存儲

sessionStorage 是HTML5新增的一個會話存儲對象，用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。本篇主要介紹 sessionStorage(會話存儲)的使用方式。包括添加、修改、刪除等操作。

目錄

1. 介紹

　　1.1 說明

　　1.2 特點

　　1.3 瀏覽器最小版本支持

　　1.4 適合場景

2. 成員

　　2.1 屬性

　　2.2 方法

3. 示例

　　3.1 存儲數據

　　3.2 讀取數據

　　3.3 存儲Json對象

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以下。

可訪問 http://dev-test.nemikor.com/web-storage/support-test/ 測試瀏覽器的存儲上限。

1.3 瀏覽器最小版本支持

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

1.4 適合場景

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

2. 成員

2.1 屬性

readonly int sessionStorage.length ：返回一個整數，表示存儲在 sessionStorage 對象中的數據項(鍵值對)數量。

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

相關推薦：

sessionStorage 存儲json對象

使用sessionStorage保存與獲取json對象

sessionStorage本地存儲數據實例

以上就是深入了解HTML5之sessionStorage對象的詳細內容，更多請關注php中文網其它相關文章！