這篇文章介紹的內容是深入了解HTML5之sessionStorage對象,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
sessionStorage 是HTML5新增的會話儲存對象,用於暫時保存相同視窗(或標籤頁)的數據,在關閉視窗或標籤頁之後將會刪除這些資料。本篇主要介紹 sessionStorage(會話儲存)的使用方式。包括新增、修改、刪除等操作。
1. 介紹
1.1 說明
1.2 特點
1.3 瀏覽器最小版本支持
1.4 適合用於情境
2. 成員
2.1 屬性
2.2 深入了解HTML5之sessionStorage對象
3. 範例
3.1
#3. 範例
## 3.2 讀取資料
3.3 儲存Json物件
1.1 說明
sessionStorage 是HTML5新增
1.1 說明
在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/### 測試瀏覽器的儲存上限。 ###### ###支援sessionStorage的瀏覽器最小版本:IE8、Chrome 5。
sessionStorage 非常適合SPA(單頁應用程式),可以方便在各業務模組進行傳值。
readonly int sessionStorage.length :傳回一個整數,表示儲存在 sessionStorage 物件中的資料項(鍵值對)數量。
string sessionStorage.key(int index) :傳回目前 sessionStorage 物件的第index序號的key名稱。若沒有回傳null。
string sessionStorage.getItem(string key) :傳回鍵名(key)對應的值(value)。若沒有回傳null。
void sessionStorage.setItem(string key, string value) :此深入了解HTML5之sessionStorage對象接受一個鍵名(key)和值(value)作為參數,將鍵值對加入儲存中;如果鍵名存在,則更新其對應的值。
void sessionStorage.removeItem#(string key) :將指定的鍵名(key)從 sessionStorage 物件移除。
void sessionStorage.clear() :清除 sessionStorage 物件所有的項目。
sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值
sessionStorage['testKey'] = '这是一个测试的value值';
sessionStorage.getItem('testKey'); // => 返回testKey对应的值
sessionStorage['testKey']; // => 这是一个测试的value值
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對象的詳細內容。更多資訊請關注PHP中文網其他相關文章!