偏前端-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的瀏覽器最小版本：IE八、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 };