1. 程式人生 > >HTML sessionStorage會話儲存

HTML sessionStorage會話儲存

   sessionStorage 是HTML5新增的一個會話儲存物件,用於臨時儲存同一視窗(或標籤頁)的資料,在關閉視窗或標籤頁之後將會刪除這些資料。本篇主要介紹 sessionStorage(會話儲存)的使用方式。包括新增、修改、刪除等操作。

目錄

1. 介紹

  1.1 說明

  1.2 特點

  1.4 適合場景

2. 成員

  2.1 屬性

  2.2 方法

3. 示例

  3.1 儲存資料

  3.2 讀取資料

1. 介紹 

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以下

1.3 瀏覽器最小版本支援

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

1.4 適合場景 

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

2. 成員

2.1 屬性

屬性 readonly int sessionStorage.length :返回一個整數,表示儲存在 sessionStorage 物件中的資料項(鍵值對)數量。

2.2 方法

方法 string sessionStorage.key(int index) :返回當前 sessionStorage 物件的第index序號的key名稱。若沒有返回null。

方法 string sessionStorage.getItem(string key) :返回鍵名(key)對應的值(value)。若沒有返回null。

方法 void sessionStorage.setItem(string key, string value) :該方法接受一個鍵名(key)和值(value)作為引數,將鍵值對新增到儲存中;如果鍵名存在,則更新其對應的值。

方法 void sessionStorage.removeItem(string key) :將指定的鍵名(key)從 sessionStorage 物件中移除。

方法 void sessionStorage.clear() :清除 sessionStorage 物件所有的項。

3. 示例

3.1 儲存資料

3.1.1 採用setItem()方法儲存

1

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

3.1.2 通過屬性方式儲存  

1

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

3.2 讀取資料

3.2.1 通過getItem()方法取值

1

sessionStorage.getItem('testKey'); // => 返回testKey對應的值

3.2.2 通過屬性方式取值

1

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

3.3 儲存Json物件

sessionStorage也可儲存Json物件:儲存時,通過JSON.stringify()將物件轉換為文字格式;讀取時,通過JSON.parse()將文字轉換回物件。

1

2

3

4

5

6

7

8

9

10

11

12

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