LocalStorage與Cookie的異同

本地存儲(Web Storage/localStorage)與會話存儲(Cookie)

1>相同之處：

1.二者都可能會被禁用；

2.存儲的資料量都有最大限制:

2.1.Cookie記憶體為4kb；

2.2.Web Storage是5MB或者更少一些；

3.使用者随時可以删除或建立/修改存儲目錄中的内容；

4.浏覽器也可能會自動讓存儲目錄中的内容"過期"；

5.空間配額是以域名為機關配置設定的，而且由所有子域共享(也就是site1.example.com、site2.example.com、site3.example.com共享同一個目錄)；

6.最好都不要用來儲存重要的内容；

存在差别:

1.通過Web Storage API儲存的資料隻能在用戶端查詢，不能被伺服器端查詢；

2.存儲的内容不會随着每個請求“來來回回”傳遞；

3.除了sessionStorage（它會在會話結束時删除自己儲存的資料）以外，不能明确指定資料的過期時間；

Web Strorage:

1.緩存對象以提升使用者下次打開應用時的加載速度、儲存正在撰寫的檔案草稿，甚至還可以把它當成虛拟的記憶體容器來使用；

2.它以鍵值對數組的形式儲存資料，所有資料都一字元串形式存儲；

3.localStorage與sessionStorage之間的差別是前者永久儲存資料(或儲存到使用者或浏覽器處理它們)，而後者隻會在“會話”期間儲存資料（關閉标簽頁或視窗後就沒有了）；

4.假如存儲的資料量超過了5MB，那浏覽器就會抛出QUOTA_EXCEENED_ERR的異常。

為此，一定别忘了把localStorage或sessionStorage封裝在一個try-catch塊中，就像其它處理異常的代碼一樣；

Web Storage的API使用方法：

1.添加資料項

localStorage.setItem(key,value)

2.查詢已有的資料項

localStorage.getItem(key，value)

3.删除特定的資料項

localStorage.removeItem(key,value)

4.完全删除localStorage目錄中的内容

localStorage.clear()

使用執行個體:

// 監聽textarea變化 $("textarea").change(function(){ // 變量名随意 var wikiContent = {'content' : $('#content').val()}; // 存儲值：将對象轉換為Json字元串。如果有多條資料的話，key 最好做一下區分 localStorage.setItem("wikiContent", JSON.stringify(wikiContent)); }); var wikiJsonStr = localStorage.getItem("wikiContent"); // 取值時：把擷取到的Json字元串轉換回對象 wikiLocalContent = JSON.parse(wikiJsonStr); // 擷取對應的值 console.log(wikiLocalContent.content);

摘自深入html5應用開發一書