首頁 > web前端 > html教學 > 深入了解HTML5之sessionStorage對象

深入了解HTML5之sessionStorage對象

零到壹度
發布: 2018-04-20 15:27:16
原創
2090 人瀏覽過

這篇文章介紹的內容是深入了解HTML5之sessionStorage對象,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

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.1 說明

sessionStorage 是HTML5新增

1.1 說明

sessionStorage 是HTML5新增的一個會話儲存對象,用於暫時保存相同視窗(或標籤頁)的數據,在關閉視窗或標籤頁之後將會刪除這些數據。

在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/### 測試瀏覽器的儲存上限。 ###### ###

1.3 瀏覽器最小版本支援

支援sessionStorage的瀏覽器最小版本:IE8、Chrome 5。

 

1.4 適合場景 

sessionStorage 非常適合SPA(單頁應用程式),可以方便在各業務模組進行傳值。

 

2. 成員

2.1 屬性

深入了解HTML5之sessionStorage對象 readonly int sessionStorage.length :傳回一個整數,表示儲存在 sessionStorage 物件中的資料項(鍵值對)數量。

 

2.2 深入了解HTML5之sessionStorage對象

深入了解HTML5之sessionStorage對象 string sessionStorage.key(int index) :傳回目前 sessionStorage 物件的第index序號的key名稱。若沒有回傳null。

深入了解HTML5之sessionStorage對象 string sessionStorage.getItem(string key) :傳回鍵名(key)對應的值(value)。若沒有回傳null。

深入了解HTML5之sessionStorage對象 void sessionStorage.setItem(string key, string value) :此深入了解HTML5之sessionStorage對象接受一個鍵名(key)和值(value)作為參數,將鍵值對加入儲存中;如果鍵名存在,則更新其對應的值。

深入了解HTML5之sessionStorage對象 void sessionStorage.removeItem#(string key) :將指定的鍵名(key)從 sessionStorage 物件移除。

深入了解HTML5之sessionStorage對象 void sessionStorage.clear() :清除 sessionStorage 物件所有的項目。

 

3. 範例

3.1 儲存資料

3.1.1 採用setItem()深入了解HTML5之sessionStorage對象儲存

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值
登入後複製

3.1.2 透過屬性方式儲存

sessionStorage['testKey'] = '这是一个测试的value值';
登入後複製

3.2 讀取資料

3.2.1 透過getItem()深入了解HTML5之sessionStorage對象取值

sessionStorage.getItem('testKey'); // => 返回testKey对应的值
登入後複製


3.2.2 透過屬性方式取值

sessionStorage['testKey']; // => 这是一个测试的value值
登入後複製

3.3 儲存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
登入後複製
######################### ####sessionStorage本地儲存資料實例######

以上是深入了解HTML5之sessionStorage對象的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板