HTML5之前的使用本地存儲
在html5之前，本地存儲使用的時cookie,他的使用場景如下：
- 瀏覽器獲取一個web頁面，比如從“pets-R-us.com”獲取頁面，服務器可以相應發送一個cookie，Cookie中包一個或多個鍵值對。例如：
Cookie: pet=dog; age=5; color=black;
- 下次瀏覽器向“pets-R-us.com”發出請求時，他會隨請求同時發送之前收到的cookie
- 服務器可以使用cookie實現個性化的體驗，在這里就是向用戶推薦一些相關商品，不過cookie還有很多其他的用法，比如定制用戶體驗，存儲數據，維護游戲狀態等。
注意：cookie與一個域關聯，如“pets-R-us.com”，而且只能發送給這個域
缺點
- 只有4k空間使用，我的應用需要更多的存儲空間。
- 每次都要來回發送cookie,這看起來很低效，特別是使用移動設備，消耗寬帶
- 使用cookie很容易向瀏覽器傳送病毒和其他惡意軟件
HTML5中使用本地存儲
HTML5為我們提供了一個很棒也很簡單的Javascript API，可以在瀏覽器中存儲要持久存儲的鍵值對。他會為瀏覽器每個域分配5到10M的存儲空間。應用場景如下：
- 頁面可以在瀏覽器的本地存儲中存儲一個或多個鍵值對。
- 然后用鍵來獲取相應的值。也可以把本地存儲的數據發送給服務器，完成一些服務器計算。
使用web storage API來存取數據
//存數據
localStorage.setItem("sticky_0", "pick up dry cleaning");
//取數據,本地并沒有刪除，只是得到對應指定鍵的值
localStorage.getItem("sticky_0");
也可以把localStorage對象看做一個關聯數組，不使用setItem方法，而是像下面這樣為鍵賦一個值：
//存儲
localStorage["sticky_0"] = "Pick up dry cleaning";
//獲取
var sticky = localStorage["sticky_0"];
通過屬性length屬性和key屬性，來操作localStorage
- length屬性包含本地存儲中的數據項數。
- key屬性是獲取localStorage中的鍵值。
例如：
for(var int = 0; i<localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
alert(value);
}
清除域中所有的本地存儲
localStorage.clear();
使用API來判斷是否支持Web Storage
if(window["localStorage"]) {
//your localStorage code here...
}
注意： 使用localStorage，只能使用字符串作為鍵和值，假如你需要存儲整數5，可以存儲字符串“5”，也可以使用
localStorage.setItem("numitems", 1);
看起來這里像是存儲的一個整數，不過是Javascrit知道這必須是一個字符串，所以它會幫你將整數轉換為一個字符串，其實存儲的還是“1”。但是獲取的時候需要手動的把他從字符串轉化為整數
var numItems = parseInt(localStorage.getItem("numitems"));
sessionStorage存儲，數據項只會在瀏覽器會話期間存儲，一旦會話結束，本地存儲的數據項就會被刪除。
- 字符串轉化為整數使用
parseInt - 字符串轉化為float類型
parseFloat - 數組轉化為json字符串
JSON.stringify(arr) - json串轉化為數組
JSON.parse(jsom)
