最近一直在學習 html5，為了后期的移動項目進行知識儲備。html5 相對於 html4 新增加了一些有趣的標簽、屬性和方法，今天主要介紹下 html5 的本地存儲。
在客戶端存儲數據
html5 提供了兩種在客戶端存儲數據的新方法：
- localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對 session 的數據存儲，一旦窗口關閉就沒有了
兩個方法用法完全一樣，下面就以 localStorage 為例。
為什么要用本地存儲
早期我們都是使用 cookie 來完成的，但是 cookie 不適合大量的數據存儲，也就是說它太小，只有 4k 的樣子，而且速度慢效率低。
localStorage 方法
那么我們該如何添加數據呢？很簡單，就像給對象添加屬性一樣：
localStorage.pageLoadCount = 1;
可以通過瀏覽器的控制台來查看是否有存儲數據：
同樣讀取和修改數據也很方便：
console.log(localStorage.pageLoadCount); //讀取 localStorage.pageLoadCount = 10; //修改 console.log(localStorage.pageLoadCount); //讀取
以下是結果：
當然 localStorage 本身自帶一些方法及屬性，具體如下：
localStorage.clear(); //清除所有的存儲數據 localStorage.getItem('pageLoadCount'); //讀取存儲數據，返回值 "10"，等同於 localStorage.pageLoadCount localStorage.key(0); //獲取存儲數據的 key，返回值 "pageLoadCount" localStorage.length; //獲取存儲數據的長度 localStorage.removeItem('pageLoadCount'); //刪除特定的存儲數據 localStorage.setItem('name','Jack'); //新增加一個存儲數據，等同於 localStorage.name = 'Jack';
需要注意的是：讀取存儲數據的時候，返回的是字符串，無論之前存的是什么，最后讀取的都是字符串，所以讀取的時候需要進行類型轉換。
最后附上 localStorage 應用的 demo：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>localStorage</title> </head> <body> <p id="p"></p> </body> </html> <script> window.onload = function(){ if(!localStorage.pageLoadCount) localStorage.pageLoadCount = 0; localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1; document.getElementById('p').innerHTML = '瀏覽次數：' + localStorage.pageLoadCount + ' 次。'; } </script>
參考資料：