HTML5 sessionStorage會話存儲

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

目錄

1. 介紹

　　1.1 說明

　　1.2 特點(diǎn)

　　1.3 瀏覽器最小版本支持

　　1.4 適合場景

2. 成員

　　2.1 屬性

　　2.2 方法

3. 示例

　　3.1 存儲數(shù)據(jù)

　　3.2 讀取數(shù)據(jù)

　　3.3 存儲Json對象

1. 介紹

1.1 說明

sessionStorage 是HTML5新增的一個(gè)會話存儲對象，用于臨時(shí)保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后將會刪除這些數(shù)據(jù)。

在JavaScript語言中可通過 window.sessionStorage 或 sessionStorage 調(diào)用此對象。

1.2 特點(diǎn)

1) 同源策略限制。若想在不同頁面之間對同一個(gè)sessionStorage進(jìn)行操作，這些頁面必須在同一協(xié)議、同一主機(jī)名和同一端口下。(IE 8和9存儲數(shù)據(jù)僅基于同一主機(jī)名，忽略協(xié)議（HTTP和HTTPS）和端口號的要求)

2) 單標(biāo)簽頁限制。sessionStorage操作限制在單個(gè)標(biāo)簽頁中，在此標(biāo)簽頁進(jìn)行同源頁面訪問都可以共享sessionStorage數(shù)據(jù)。

3) 只在本地存儲。seesionStorage的數(shù)據(jù)不會跟隨HTTP請求一起發(fā)送到服務(wù)器，只會在本地生效，并在關(guān)閉標(biāo)簽頁后清除數(shù)據(jù)。(若使用Chrome的恢復(fù)標(biāo)簽頁功能，seesionStorage的數(shù)據(jù)也會恢復(fù))。

4) 存儲方式。seesionStorage的存儲方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串，也會在存儲時(shí)轉(zhuǎn)換為字符串。true值會轉(zhuǎn)換為"true")。

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

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

1.3 瀏覽器最小版本支持

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

1.4 適合場景

sessionStorage 非常適合SPA(單頁應(yīng)用程序)，可以方便在各業(yè)務(wù)模塊進(jìn)行傳值。

2. 成員

2.1 屬性

readonly int sessionStorage.length ：返回一個(gè)整數(shù)，表示存儲在 sessionStorage 對象中的數(shù)據(jù)項(xiàng)(鍵值對)數(shù)量。

2.2 方法

string sessionStorage.key(int index) ：返回當(dāng)前 sessionStorage 對象的第index序號的key名稱。若沒有返回null。

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

void sessionStorage.setItem(string key, string value) ：該方法接受一個(gè)鍵名(key)和值(value)作為參數(shù)，將鍵值對添加到存儲中；如果鍵名存在，則更新其對應(yīng)的值。

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

void sessionStorage.clear() ：清除 sessionStorage 對象所有的項(xiàng)。

3. 示例

3.1 存儲數(shù)據(jù)

3.1.1 采用setItem()方法存儲

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

3.1.2 通過屬性方式存儲　　

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

3.2 讀取數(shù)據(jù)

3.2.1 通過getItem()方法取值

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

3.2.2 通過屬性方式取值

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

3.3 存儲Json對象

sessionStorage也可存儲Json對象：存儲時(shí)，通過JSON.stringify()將對象轉(zhuǎn)換為文本格式；讀取時(shí)，通過JSON.parse()將文本轉(zhuǎn)換回對象。

var userEntity = {
    name: 'tom',
    age: 22
};
 
// 存儲值：將對象轉(zhuǎn)換為Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
 
// 取值時(shí)：把獲取到的Json字符串轉(zhuǎn)換回對象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

相關(guān)推薦：

sessionStorage 存儲json對象

使用sessionStorage保存與獲取json對象

sessionStorage本地存儲數(shù)據(jù)實(shí)例

以上就是深入了解HTML5之sessionStorage對象的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！