sessionStorage 是HTML5新增的一個會話存儲對象，用于臨時保存同一窗口(或標簽頁)的數(shù)據(jù)，在關閉窗口或標簽頁之后將會刪除這些數(shù)據(jù)。本篇主要介紹sessionStorage(會話存儲)的使用方式。包括添加、修改、刪除等操作。
sessionStorage 是HTML5新增的一個會話存儲對象，用于臨時保存同一窗口(或標簽頁)的數(shù)據(jù)，在關閉窗口或標簽頁之后將會刪除這些數(shù)據(jù)。
在JavaScript語言中可通過 window.sessionStorage 或sessionStorage 調(diào)用此對象。
特點
1) 同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協(xié)議、同一主機名和同一端口下。(IE 8和9存儲數(shù)據(jù)僅基于同一主機名，忽略協(xié)議（HTTP和HTTPS）和端口號的要求)
2) 單標簽頁限制。sessionStorage操作限制在單個標簽頁中，在此標簽頁進行同源頁面訪問都可以共享sessionStorage數(shù)據(jù)。
3) 只在本地存儲。seesionStorage的數(shù)據(jù)不會跟隨HTTP請求一起發(fā)送到服務器，只會在本地生效，并在關閉標簽頁后清除數(shù)據(jù)。(若使用Chrome的恢復標簽頁功能，seesionStorage的數(shù)據(jù)也會恢復)。
4) 存儲方式。seesionStorage的存儲方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串，也會在存儲時轉(zhuǎn)換為字符串。true值會轉(zhuǎn)換為"true")。
5) 存儲上限限制：不同的瀏覽器存儲的上限也不一樣，但大多數(shù)瀏覽器把上限限制在5MB以下。
瀏覽器最小版本支持
支持sessionStorage的瀏覽器最小版本：IE8、Chrome 5。
適合場景
sessionStorage 非常適合SPA(單頁應用程序)，可以方便在各業(yè)務模塊進行傳值。
屬性
readonly intsessionStorage.length：返回一個整數(shù)，表示存儲在 sessionStorage對象中的數(shù)據(jù)項(鍵值對)數(shù)量。
方法
string sessionStorage.key(int index) ：返回當前sessionStorage 對象的第index序號的key名稱。若沒有返回null。 stringsessionStorage.getItem(string key) ：返回鍵名(key)對應的值(value)。若沒有返回null。 voidsessionStorage.setItem(string key, string value) ：該方法接受一個鍵名(key)和值(value)作為參數(shù)，將鍵值對添加到存儲中；如果鍵名存在，則更新其對應的值。 voidsessionStorage.removeItem(string key) ：將指定的鍵名(key)從sessionStorage 對象中移除。 voidsessionStorage.clear() ：清除sessionStorage 對象所有的項。
存儲數(shù)據(jù)
采用setItem()方法存儲
sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值
通過屬性方式存儲
sessionStorage['testKey'] = '這是一個測試的value值';
讀取數(shù)據(jù)
通過getItem()方法取值
sessionStorage.getItem('testKey'); // => 返回testKey對應的值
通過屬性方式取值
sessionStorage['testKey']; // => 這是一個測試的value值
存儲Json對象
sessionStorage也可存儲Json對象：存儲時，通過JSON.stringify()將對象轉(zhuǎn)換為文本格式；讀取時，通過JSON.parse()將文本轉(zhuǎn)換回對象。
var userEntity = {
name: 'tom',
age: 22
};
// 存儲值：將對象轉(zhuǎn)換為Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
// 取值時：把獲取到的Json字符串轉(zhuǎn)換回對象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom
以上所述是小編給大家介紹的html5 sessionStorage會話存儲，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
