偏前端-HTML5 sessionStorage-會話存儲

sessionStorage 是HTML5新增的一個會話存儲對象，用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁之後將會刪除這些數據。本篇主要介紹 sessionStorage(會話存儲)的使用方式。包括添加、修改、刪除等操作。

說明：

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

在JavaScript語言中可通過 window.sessionStorage 或 sessionStorage 調用此對象。

適用場景：

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

其實：

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

sessionStorage：關閉頁面就會銷燬存儲的數據

localStorage：用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

-------下面我們來看看他有哪些屬性和方法-------

屬性：

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) //該方法接受一個鍵名(key)和值(value)作為參數，將鍵值對添加到存儲中；如果鍵名存在，則更新其對應的值。

void sessionStorage.removeItem(string key) //將指定的鍵名(key)從 sessionStorage 對象中移除。

void sessionStorage.clear() //清除 sessionStorage 對象所有的項。

-------示例-------

存儲數據

//採用setItem()方法存儲

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

//通過屬性方式存儲

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

讀取數據

//通過getItem()方法取值

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);

數組：

var arra=[1,2,3,4];

localStorage.setItem('key',JSON.stringify(arra));

var read=JSON.parse(localStorage.getItem('key'));

console.log(read,read.length);

注意：　

1) 同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協議、同一主機名和同一端口下。(IE 8和9存儲數據僅基於同一主機名，忽略協議（HTTP和HTTPS）和端口號的要求)

2) 單標籤頁限制。sessionStorage操作限制在單個標籤頁中，在此標籤頁進行同源頁面訪問都可以共享sessionStorage數據。

3) 只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一起發送到服務器，只會在本地生效，並在關閉標籤頁後清除數據。(若使用Chrome的恢復標籤頁功能，seesionStorage的數據也會恢復)。

4) 存儲方式。seesionStorage的存儲方式採用key、value的方式。value的值必須為字符串類型(傳入非字符串，也會在存儲時轉換為字符串。true值會轉換為"true")。

5) 存儲上限限制：不同的瀏覽器存儲的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下。

瀏覽器版本支持：

支持sessionStorage的瀏覽器最小版本：IE8、Chrome 5。

再來個小demo:

樣式：

1 #container { 2 border: 2px solid gray; 3 width: 320px; 4 text-align:center; 5 }

html:

 1 <div id="container">
 2 <br>
 3 <label for="username">姓名：</label>
 4 <input type="text" id="username" name="username">
 5 <br>
 6 <label for="mobilephone">手機：</label>
 7 <input type="text" id="mobilephone" name="mobilephone">
 8 <br><br>
 9 <input type="button" onclick="add()" id="add" value="增加聯繫人">
10 <br><br>
11 <hr>
12 <label for="search">輸入姓名：</label>
13 <input type="text" id="search" name="search">
14 <br><br>
15 <input type="button" onclick="find()" id="find" value="查找手機號">
16 <p id="result"><br></p>
17 </div>

js:

 1 var user = document.getElementById('username'),
 2 phone = document.getElementById('mobilephone'),
 3 search = document.getElementById('search'),
 4 result = document.getElementById('result');
 5 var add = function(){
 6 var u = user.value,
 7 p = phone.value,
 8 l = localStorage.length;
 9 if(u !== '' && p !== ''){
10 localStorage.setItem(u, p);
11 user.value = '';
12 phone.value = '';
13 alert('添加成功');
14 }
15 };
16 var find = function(){
17 var s = search.value,
18 r = localStorage.getItem(s); 

19 if(s !== '' && r){
20 result.innerHTML = r;
21 }
22 };