深入了解HTML5之sessionStorage對象
- 零到壹度原創
- 2018-04-20 15:27:162039瀏覽
這篇文章介紹的內容是深入了解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 屬性
readonly int sessionStorage.length ：傳回一個整數，表示儲存在
sessionStorage 物件中的資料項(鍵值對)數量。
2.2 深入了解HTML5之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 物件所有的項目。
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中文網其他相關文章！