HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在於 sessionStorage 在關閉頁面后即被清空，而 localStorage 則會一直保存。我們這里以 localStorage 為例，簡要介紹下 html5 的本地存儲，並針對如遍歷等常見問題作一些示例說明。 localStorage 是 Html5 本地存儲的 API，使用鍵值對的方式進行存取數據，存取的數據只能是字符串。不同瀏覽器對該 API 支持情況有所差異，如使用方法、最大存儲空間等。
存儲方式：以鍵值對(Key-Value)的方式存儲字符串。
主要應用：購物車、客戶登錄、游戲存檔。。。
可儲存的數據類型：數組，圖片，json，樣式，腳本。。。（只要是能序列化成字符串的內容都可以存儲）
儲存地址：C:\Users\15014\AppData\Local\Google\Chrome\User Data\Default\Local Storage（不同電腦不一樣，需要打開隱藏文件顯示，但是在C盤搜索localStorage就能搜出這個文件夾。）
localStorage的優勢
1、localStorage拓展了cookie的4K限制
2、localStorage會可以將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的針對於前端頁面的數據庫，相比於cookie可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的
localStorage的局限
1、瀏覽器的大小不統一，並且在IE8以上的IE版本才支持localStorage這個屬性
2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換
3、localStorage在瀏覽器的隱私模式下面是不可讀取的
4、localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
5、localStorage不能被爬蟲抓取到
localStorage與sessionStorage的唯一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空
這里我們以localStorage來分析
localStorage的使用
首先在使用localStorage的時候，我們需要判斷瀏覽器是否支持localStorage這個屬性
if(！window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
//主邏輯業務
}
localStorage官方提供了四個方法來輔助我們進行對本地存儲做相關操作。
（1）localStorage.setItem(鍵名，鍵值)在本地客戶端存儲一個字符串類型的數據，其中，第一個參數“鍵名”代表了該數據的標識符，而第二個參數“鍵值”為該數據本身。如：
localStorage.setItem("name", "張三"); //存儲鍵名為name和鍵值為"張三"的數據到本地
localStorage.setItem("age", "28"); //存儲鍵名為age和鍵值為"28"的數據到本地
（2）localStorage.getItem(鍵名) 讀取已存儲在本地的數據，通過鍵名作為參數讀取出對應鍵名的數據。如：
var data = localStorage.getItem("name");
alert(data);//張三
（3）localStorage.removeItem(鍵名)移除已存儲在本地的數據，通過鍵名作為參數刪除對應鍵名的數據。如：
var data2 = localStorage.removeItem("name");//從本地存儲中移除鍵名為name的數據
alert(data2); //undefined
（4）localStorage.clear() 移除本地存儲所有數據。如：
localStorage.clear() 移除本地存儲所有數據。如：
localStorage.clear(); //保存着的"age/28"和"name/張三"的鍵/值對也被移除了，所有本地數據拜拜
（5）另外，sessionStorage中的四個函數與以上localStorage類的函數用法基本一致，就不再詳解。
下面是一個小實例：
<script type="text/javascript"> localStorage.setItem("name", "張三"); localStorage.setItem("age", "28"); verify(); //驗證本地存儲 localStorage.removeItem("name"); verify(); //驗證name是否存在 localStorage.clear(); verify(); //驗證name和age是否存在 //自定義驗證函數，驗證name和age的數據是否存在 function verify(){ var type = localStorage.getItem("name"); var price = localStorage.getItem("age"); type = type ? type : '不存在'; price = price ? price : '不存在'; alert( "name: " + type + "\n\n" + "age: " + price ); } </script>
其實
localStorage的寫入和讀取 有三種方法，這里就一一介紹一下
if(!window.localStorage){
alert("瀏覽器支持localstorage");
}else{
var storage=window.localStorage;
//寫入a字段
storage["a"]=1;
//寫入b字段
storage.b=1;
//寫入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
//第一種方法讀取
var a=storage.a;
console.log(a);
//第二種方法讀取
var b=storage["b"];
console.log(b);
//第三種方法讀取
var c=storage.getItem("c");
console.log(c);
}
注意到，剛剛存儲進去的是int類型，但是打印出來卻是string類型，這個與localStorage本身的特點有關，localStorage只支持string類型的存儲。
localStorage的刪除
1、 將localStorage中的某個鍵值對刪除
localStorage.setItem("c",3);
console.log(localStorage.getItem('c'));
localStorage.removeItem("c");
console.log(localStorage.getItem('c'));
2、 將localStorage的所有內容清除
storage.clear();
localStorage的鍵獲取
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
localStorage其他注意事項
一般我們會將JSON存入localStorage中，但是在localStorage會自動將localStorage轉換成為字符串形式
這個時候我們可以使用JSON.stringify()這個方法，來將JSON轉換成為JSON字符串,
示例：
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var json_string=JSON.stringify(data);
localStorage.setItem("data",d);
console.log(localStorage.data);
//將JSON字符串轉換成為JSON對象輸出
var json_str=localStorage.getItem("data");
var jsonObj=JSON.parse(json_str);
console.log(typeof jsonObj);
讀取之后要將JSON字符串轉換成為JSON對象，使用JSON.parse()方法