HTML5本地存儲

1、sessionStorage和localStorage

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

sessionStorage：用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

1. 經過sessionStorage所存儲數據的生命週期，和Session相似，關閉瀏覽器（或標籤頁）後數據就不存在了。但刷新頁面或使用「前進」、「後退按鈕」後sessionStorage仍然存在。
2. session storage每一個窗口的值都是獨立的（每一個窗口都有本身的數據），它的數據會隨着窗口的關閉而消失，窗口間的sessionStorage也是不能夠共享的。

而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

1. local storage把只把數據存儲在了客戶端使用，不會發送的服務器上（除非你故意這樣作）。
2. 並且對於某一個域下來講，local storage是共享的（多個窗口共享一個「數據庫」）。
3. localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

2、web storage和cookie的區別

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，cookie的存儲限制在了4k以內，而且每次你請求一個Cookie 的內容會隨着頁面請求一併發往服務器。，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。

可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生。

3、判斷瀏覽器是否支持LocalStorage，SessionStorage

if(window.localStorage){     
  alert("瀏覽支持localStorage") 
}else{  
  alert("瀏覽暫不支持localStorage") 
}

或者

if(typeof window.localStorage == 'undefined')
{ 	alert("瀏覽暫不支持localStorage") }

換爲window.sessionStorage一樣

4、經常使用方法

window.sessionStorage.name = 'rainman';           // 賦值
window.sessionStorage.setItem('name','cnblogs');  // 賦值
window.sessionStorage.getItem('name');            // 取值
window.sessionStorage.removeItem('name');         // 移除值
window.sessionStorage.clear();                    // 刪除全部sessionStorage

1. setItem中的key、value使用的是字符串的形式進行存儲的。也就是說若是有以下的代碼：setItem(‘count’, 1);經過getItem(‘count’) + 5 獲得的將不是預期的6(整數)，而是’16’(字符串)。
2. 再次使用setItem設置已經存在的key的value時，新的值將替代舊的值。

5、LocalStorage應用舉例 

//結合JSON.stringify使用更強大
var person = {'name': 'rainman', 'age': 24};
localStorage.setItem("me", JSON.stringify(person));
JSON.parse(localStorage.getItem('me')).name;	// 'rainman'

/**
 * JSON.stringify，將JSON數據轉化爲字符串
 *     JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}'
 *     JSON.stringify(['a', 'b', 'c']);               // '["a","b","c"]'
 * JSON.parse，反解JSON.stringify
 *     JSON.parse('["a","b","c"]')                    // ["a","b","c"]
 */

var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}

storage只能存儲字符串的數據，對於JS中經常使用的數組或對象卻不能直接存儲。

但咱們能夠經過JSON對象提供的parse和stringify將其餘數據類型轉化成字符串，再存儲到storage中就能夠了。請看下面的代碼。

var obj = { name:'Jim' }; 
var str = JSON.stringify(obj); 

//存入 
sessionStorage.obj = str; 
//讀取 
str = sessionStorage.obj; 
//從新轉換爲對象 
obj = JSON.parse(str);

 

在localStorage中存儲對象數組並讀取

頻繁ajax請求致使頁面響應變慢。 
因而考慮將數據存儲在window.storage中，這樣只請求一次ajax，而不須要頻繁請求。 
鑑於localstorage中只能存儲字符串，因此咱們要藉助於JSON.stringify()和JSON.parse();

$.ajax({
    type: "get",
    async: "true",
    url: "",
    data: {},
    dataType: "jsonp",
    success: function(data){
        if(data instanceof Array){
            stroage.push(JSON.stringify(data[i])); //storage是外部定義的數組  storage = []
        }
    },
    error: function(){
    }
});

如今，咱們將data存儲在了storage中，當咱們須要使用時:

fucntion getData(){
    window.localStorage.job = JSON.stringify(storage); //將storage轉變爲字符串存儲
    var job = JSON.parse(window.localStorage.job);
    for(var i = 0; i < job.length; i++){
        job[i] = JSON.parse(job[i]);
    }
    //此時job中存儲的就是對象數組了
}

參考連接http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html#m0

http://blog.csdn.net/liuyan19891230/article/details/52638408