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 |
|
3.1.2 通過屬性方式儲存
1 |
|
3.2 讀取資料
3.2.1 通過getItem()方法取值
1 |
|
3.2.2 通過屬性方式取值
1 |
|
3.3 儲存Json物件
sessionStorage也可儲存Json物件:儲存時,通過JSON.stringify()將物件轉換為文字格式;讀取時,通過JSON.parse()將文字轉換回物件。
1 2 3 4 5 6 7 8 9 10 11 12 |
|