sessionStorage 是HTML5新增的一個會話存儲對象,用於臨時保存同一窗口(或標籤頁)的數據,在關閉窗口或標籤頁之後將會刪除這些數據。本篇主要介紹sessionStorage(會話存儲)的使用方式。包括添加、修改、刪除等操作。
sessionStorage 是HTML5新增的一個會話存儲對象,用於臨時保存同一窗口(或標籤頁)的數據,在關閉窗口或標籤頁之後將會刪除這些數據。
在JavaScript語言中可通過window.sessionStorage 或sessionStorage 調用此對象。
特點1) 同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作,這些頁面必須在同一協議、同一主機名和同一端口下。 (IE 8和9存儲數據僅基於同一主機名,忽略協議(HTTP和HTTPS)和端口號的要求)
2) 單標籤頁限制。 sessionStorage操作限制在單個標籤頁中,在此標籤頁進行同源頁面訪問都可以共享sessionStorage數據。
3) 只在本地存儲。 seesionStorage的數據不會跟隨HTTP請求一起發送到服務器,只會在本地生效,並在關閉標籤頁後清除數據。 (若使用Chrome的恢復標籤頁功能,seesionStorage的數據也會恢復)。
4) 存儲方式。 seesionStorage的存儲方式採用key、value的方式。 value的值必須為字符串類型(傳入非字符串,也會在存儲時轉換為字符串。true值會轉換為true)。
5) 存儲上限限制:不同的瀏覽器存儲的上限也不一樣,但大多數瀏覽器把上限限制在5MB以下。
瀏覽器最小版本支持支持sessionStorage的瀏覽器最小版本:IE8、Chrome 5。
適合場景sessionStorage 非常適合SPA(單頁應用程序),可以方便在各業務模塊進行傳值。
屬性readonly intsessionStorage.length:返回一個整數,表示存儲在sessionStorage對像中的數據項(鍵值對)數量。
方法string sessionStorage.key(int index) :返回當前sessionStorage 對象的第index序號的key名稱。若沒有返回null。 stringsessionStorage.getItem(string key) :返回鍵名(key)對應的值(value)。若沒有返回null。 voidsessionStorage.setItem(string key, string value) :該方法接受一個鍵名(key)和值(value)作為參數,將鍵值對添加到存儲中;如果鍵名存在,則更新其對應的值。 voidsessionStorage.removeItem(string key) :將指定的鍵名(key)從sessionStorage 對像中移除。 voidsessionStorage.clear() :清除sessionStorage 對象所有的項。
存儲數據採用setItem()方法存儲sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值通過屬性方式存儲
sessionStorage['testKey'] = '這是一個測試的value值';讀取數據通過getItem()方法取值
sessionStorage.getItem('testKey'); // => 返回testKey對應的值通過屬性方式取值
sessionStorage['testKey']; // => 這是一個測試的value值存儲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
以上所述是小編給大家介紹的html5 sessionStorage會話存儲,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持!