localStorage和sessionStorage

　　localStorage和sessionStorage是HTML5中用於本地存儲的方法。兩者的用法幾乎相同，不一樣點是兩者的存儲時間是不一樣的：localStorage是一直存儲在本地的，而sessionStorage則是噹噹前窗口關閉的時候，存儲的數據就會清空。

　　1.  判斷是否支持本地存儲

　　判斷瀏覽器是否支持本地存儲也是和簡單的，只要執行下面的代碼就能夠了（以localStorage爲例）：

if(window.localStorage){
    alert('ok');
}else{
    alert('no');
}

　　

　　2.   localStorage的使用

　　本地存儲是經過鍵值對進行存儲的，以下：

var storage = window.localStorage;
storage['name'] = 'local';
console.log(storage['name']);
storage.setItem('name','storage');
console.log(storage.getItem('name'));

　　因而可知對於鍵值對的存儲有兩種方式（事實上能夠說是三種方式，包括storage.name)：用對象設置獲取屬性和調用函數的方法。對於存儲而言是必需要有清除數據的方法的，在本地存儲中，用於清除鍵值對的方法是removeItem()和clear()，從字面上的意思咱們就能夠知道：removeItem是用於清除某一個鍵值對，而clear是用於清除全部的鍵值對。

var storage = window.localStorage;
storage['name'] = 'local';
storage.removeItem('name');
console.log(storage.name);
storage.setItem('name','storage');
storage.clear(); 
console.log(storage.getItem('name'));

　　如上代碼，均顯示爲undefined，由於每次設置將鍵值對存入本地後，都會刪除鍵值對。

　　另外本地存儲可使用length來獲取鍵值對的個數。同時HTML5還提供了key(index)函數，能夠得到相應的鍵名，經過key也能夠遍歷本地存儲，將本地存儲的鍵值對都打印出來。

var storage = window.localStorage;
storage.setItem('name','jyy');
storage.setItem('home','chengde');
storage.setItem('age','26');
for(var i = 0; i < storage.length; i++){
    console.log('key:' + storage.key(i) + '---value:' + storage.getItem(storage.key(i)));
}

　　如上面的代碼就是將localStorage中的全部鍵值對進行輸入。須要注意的是HTML5的本地存儲只能存儲字符串類型，所以想要使用其餘的類型，須要本身手動轉換.

　　另外本地存儲還提供了一個storage事件，能夠對鍵值對進行監聽。

　　PS.在firefox和chrome中存儲和讀取都是正常的, 可是對storage事件的觸發彷佛有點問題, 自身頁面進行setItem後沒有觸發window的storage事件, 可是同時訪問A.html和B.html, 在A頁面中進行 setItem能觸發B頁面中window的storage事件, 一樣的在B頁面中進行setItem能觸發A頁面中window的storage事件. 在IE9中, 頁面自身的設值能觸發當前頁面的storage事件,一樣當前頁面的設值能觸發同一」起源」下其餘頁面window的storage事件,這看起來彷佛更 讓人想的通些.