有關localStorage和sessionStorage的特性。
localStorage本身帶有方法有
添加鍵值對：localStorage.setItem(key,value)，如果key存在時，更新value。
獲取鍵值：localStorage.getItem(key)，如果key不存在返回null。
刪除鍵值對：localStorage.removeItem(key)。key對應的數據將會全部刪除。
清除所有鍵值對：localStorage.clear()。如果調用clear()方法，清空localStorage中所有信息，那么key、oldValue和newValue都會被設置為null。
獲取localStorage的屬性名稱（鍵名稱）：localStorage.key(index)。
還有一個和普通對象不一樣的屬性length:
獲取localStorage中保存的鍵值對的數量：localStorage.length。
下面這個例子用來獲取localStorage的鍵值對
for(var i=0;i<localStorage.length;i++){
console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
}
1、存儲格式
localStorage對象的鍵和值只能是字符串，假設我們要保存一個對象到localStorage中，可以使用拼接的方式。當然也可以借助JSON類，將對象轉換成字符串保存，然后在取出來的時候將json字符串轉換成真正可用的json對象格式
存儲JSON格式數據
JSON.stringify(data) 將一個對象轉換成JSON格式的數據串,返回轉換后的串
JSON.parse(data) 將數據解析成對象，返回解析后的對象
（雖然規范中可以存儲其他原生類型的對象，但是目前為止沒有瀏覽器對其進行實現）。
2、生命周期
在數據存儲的時效性上，localStorage並不會像cookie那樣可以設置數據存活的時限。也就是說，只要用戶不主動刪除，localStorage存儲的數據將會永久存在。
sessionStorage生命周期為當前窗口或標簽頁，一旦窗口或標簽頁被永久關閉了，那么所有通過sessionStorage存儲的數據也就被清空了。
3、存儲位置
當然，對於localStorage數據的存儲，是存在於本地的文件系統中的，例如，對於chrome來說，localStorage數據的存儲位置是在：C:\Users\{userName}\AppData\Local\Google\Chrome\User Data\Default\Local Storage中。對於其他4大瀏覽器，大家可以自行查找進行查看。
4、數據共享
不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage（頁面屬於相同域名和端口），但是不同頁面或標簽頁間無法共享sessionStorage的信息。這里需要注意的是，頁面及標簽頁僅指頂級窗口，如果一個標簽頁包含多個iframe標簽且他們屬於同源頁面，那么他們之間是可以共享sessionStorage的。
5、兼容性
可以看到，除IE外的其他瀏覽器很早的版本都支持了，對於IE低版本系列的瀏覽器，我們需要一個兼容方案來處理。
微軟在IE5.0以后，自定義了一種持久化用戶數據的概念userData，這種存儲方式只有IE瀏覽器自己支持。來看看其如何操作——
(function(win) {
// 對於IE，且不支持localStorage的瀏覽器
// 即針對IE6/7
if ( typeof win.attachEvent != "undefined" && typeof win.localStorage == "undefined") {
var localFileName = "_simulateLocalStorage",
expires = 365,
formField = null;
// 設置有效期為365天
var expire = new Date();
expire.setDate(expires + expire.getDate());
formField = document.createElement("input");
formField.type = "hidden";
formField.addBehavior('#default#userData');
document.body.appendChild(formField);
var storage = {
setItem : function(key, value) {
formField.load(localFileName);
formField.setAttribute(key, value);
formField.save(localFileName);
},
getItem : function(key) {
formField.load(localFileName);
return formField.getAttribute(key);
},
removeItem : function(key) {
formField.load(localFileName);
formField.removeAttribute(key);
formField.save(localFileName);
},
clear : function() {
formField.load(localFileName);
var d = new Date();
d.setDate(d.getDate() - 1);
formField.expires = d.toUTCString();
formField.save(localFileName);
}
};
win["localStorage"] = storage;
}
})(window);
這里僅僅是對IE兼容性的簡單包裝，下面的鏈接給出非常完善的針對localStorage兼容性的解決方案。
https://github.com/machao/localStorage
6、存儲大小
對於HTML5的localStorage而言，其大小支持為5M（當然，各瀏覽器的大小差異還是有的）。對於IE的userData，用戶數據的每個域最大為64KB。
7、應用場景
建議不要使用localStorage方式存儲敏感信息，哪怕這些信息進行過加密。另外，對身份驗證數據使用localStorage進行存儲還不太成熟。我們知道，通常可以通過xss漏洞來獲取到Cookie，然后用這個Cookie進行身份驗證登錄，但是瀏覽器可以通過HttpOnly來保護Cookie不被XSS攻擊獲取到。而localStorage存儲沒有對XSS攻擊有任何防御機制，一旦出現XSS漏洞，那么存儲在localStorage里的數據就極易被獲取到。
storage事件：當存儲的storage數據發生變化時都會觸發它，但是它不同於click類的事件會冒泡和能取消，storage改變的時候，觸發這個事件會調用所有同域下其他窗口的storage事件，不過它本身觸發storage即當前窗口是不會觸發這個事件的（當然ie這個特例除外，它包含自己本事也會觸發storage事件）。
在使用 Storage 進行存取操作的同時，如果需要對存取操作進行監聽，可以使用 HTML5 Web Storage api 內置的事件監聽器對數據進行監控。只要 Storage 存儲的數據有任何變動，Storage 監聽器都能捕獲。
interface Storage : Event{
readonly attribute DOMString key; readonly attribute DOMString? oldValue; readonly attribute DOMString? newValue; readonly attribute DOMString url; readonly attribute Storage? storageArea; void initStorageEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString keyArg, in DOMString oldValueArg, in DOMString newValueArg, in DOMString urlArg, in Storage storageAreaArg); };
不難看出其中包含以下屬性：
- key 屬性表示存儲中的鍵名
- oldValue 屬性表示數據更新前的鍵值，newValue 屬性表示數據更新后的鍵值。如果數據為新添加的，則 oldValue 屬性值為 null。如果數據通過 removeItem 被刪除，則 newValue 屬性值為 null 。如果 Storage 調用的是 clear 方法，則事件中的 key 、oldValue 、newValue 都是為 null
- url 屬性記錄 Storage 時間發生時的源地址
- StorageArea 屬性指向事件監聽對應的 Storage 對象
Storage 事件可以使用 W3C 標准的注冊事件方法 addEventListenter 進行注冊監聽。例如：
window.addEventlistener("storage",showStorageEvent,false); function showStorageEvent(e){ console.log(e) }
舉例：
頁面a下，有個input框用來存儲store，它自身綁定了storage事件，這個時候寫入新的數據點擊保存，這時新的sotre數據保存了，但是頁面a的storage事件沒觸發，
而頁面b下，綁定的storage事件則觸發了。（ps：前提頁面a和b在同域下，並都是打開狀態不同窗口）；
頁面a代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" placeholder="input date to save">
<button>save</button>
<script>
(function(D){
var val = D.getElementsByTagName("input")[0],
btn = D.getElementsByTagName("button")[0];
btn.onclick = function(){
var value = val.value;
if(!value) return;
localStorage.setItem("key", val.value);
};
window.addEventListener("storage", function(e){
console.log(e);
});
})(document);
</script>
</body>
</html>
頁面b代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
window.addEventListener("storage", function(e){
console.log(e);
document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue)
});
</script>
</body>
</html>
看到這里是不是很疑惑那storage事件到底有什么用，多窗口間多通信用到它就是最好選擇了，比如某塊公用內容區域基礎數據部分都是從store中提取的，這個區域中大多數頁面中都有，當用戶打開多個頁面時，在其中一個頁面做了數據修改，那其他頁面同步更新是不是很方便（當前頁面就要用其他方式處理了），當然用於窗口間通信它作用不僅僅如此，更多的大家可以利用它特性去發揮。
在上面的demo頁面b中storage的events對象的屬性常用的如下：
oldValue：更新前的值。如果該鍵為新增加，則這個屬性為null。
newValue：更新后的值。如果該鍵被刪除，則這個屬性為null。
url：原始觸發storage事件的那個網頁的網址。
key：存儲store的key名；
參考：
1>http://www.cnblogs.com/jinguangguo/p/4083919.html
2> http://blog.csdn.net/nx8823520/article/details/30478859