html5 sessionStorage會(huì)話存儲(chǔ)_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

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

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

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

特點(diǎn)

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

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

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

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

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

瀏覽器最小版本支持

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

適合場景

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

屬性

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

方法

string sessionStorage.key(int index) ：返回當(dāng)前sessionStorage 對(duì)象的第index序號(hào)的key名稱。若沒有返回null。 stringsessionStorage.getItem(string key) ：返回鍵名(key)對(duì)應(yīng)的值(value)。若沒有返回null。 voidsessionStorage.setItem(string key, string value) ：該方法接受一個(gè)鍵名(key)和值(value)作為參數(shù)，將鍵值對(duì)添加到存儲(chǔ)中；如果鍵名存在，則更新其對(duì)應(yīng)的值。 voidsessionStorage.removeItem(string key) ：將指定的鍵名(key)從sessionStorage 對(duì)象中移除。 voidsessionStorage.clear() ：清除sessionStorage 對(duì)象所有的項(xiàng)。

存儲(chǔ)數(shù)據(jù)

采用setItem()方法存儲(chǔ)

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

通過屬性方式存儲(chǔ)　　

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

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

通過getItem()方法取值

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

通過屬性方式取值

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

存儲(chǔ)Json對(duì)象

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

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

以上所述是小編給大家介紹的html5 sessionStorage會(huì)話存儲(chǔ)，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！