在客戶端存儲數據，HTML5 提供了兩種在客戶端存儲數據的新方法：
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數據不是由每個服務器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。
localStorage的使用遵循同源策略，對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。
localStorage解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中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使用實例1：
1 //localStorage的瀏覽器支持情況： 2 3 //1. 判斷瀏覽器是否支持localStorage這個屬性 4 if(！window.localStorage){ 5 alert("瀏覽器支持localstorage"); 6 return false; 7 }else{ 8 //主邏輯業務 9 } 10 11 12 //localStorage的寫入、修改、刪除、讀取 13 14 if(！window.localStorage){ 15 alert("瀏覽器支持localstorage"); 16 return false; 17 }else{ 18 var storage=window.localStorage; 19 //寫入或修改a字段 20 storage["a"]=1; 21 //寫入或修改b字段 22 storage.b=1; 23 //寫入或修改c字段 24 storage.setItem("c",3); 25 console.log(typeof storage["a"]); //string 26 console.log(typeof storage["b"]); //string 27 console.log(typeof storage["c"]); //string 28 //localStorage的鍵獲取 29 for(var i=0;i<storage.length;i++){ 30 //使用key()方法，向其中出入索引即可獲取對應的鍵 31 var key=storage.key(i); 32 console.log(key); 33 } 34 //存儲json 35 //localStorage只支持string類型的存儲。 36 /* 37 一般我們會將JSON存入localStorage中，但是在localStorage會自動將localStorage轉換成為字符串形式 38 這個時候我們可以使用JSON.stringify()這個方法，來將JSON轉換成為JSON字符串 39 */ 40 var data={ 41 name:'xiecanyong', 42 sex:'man', 43 hobby:'program' 44 }; 45 var d=JSON.stringify(data); 46 storage.setItem("data",d); 47 console.log(storage.data); 48 //讀取之后使用JSON.parse()方法將JSON字符串轉換成為JSON對象， 49 50 //將localStorage中的某個鍵值對刪除 51 storage.removeItem("a"); 52 //將localStorage的所有內容清除 53 storage.clear(); 54 }
localStorage使用實例2：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 </head> 7 8 <body> 9 <script type="text/javascript"> 10 window.onload = function() { 11 12 if(window.localStorage){ 13 //主邏輯業務 14 window.localStorage.clear(); //清除所有的變量和值 15 window.localStorage.a = 100; 16 window.localStorage["b"] = 200; 17 window.localStorage.setItem("c", 300); 18 19 console.log("window.localStorage.a=" + window.localStorage.a); 20 console.log("window.localStorage['b']=" + window.localStorage["b"]); 21 console.log("window.localStorage.getItem('c')=" + window.localStorage.getItem("c")); 22 23 console.log(window.localStorage); 24 console.log(typeof window.localStorage); 25 for (var i = 0; i < window.localStorage.length; i++) { 26 var key1 = window.localStorage.key(i); 27 var key2 = window.localStorage.getItem(key1); 28 console.log("字段名：" + key1 + " 值：" + key2); 29 } 30 31 console.log(typeof window.localStorage.a); 32 console.log(typeof window.localStorage['b']); 33 console.log(typeof window.localStorage.getItem('c')); 34 35 36 console.log("空了：" + window.localStorage); 37 window.localStorage.SB = "我是你大爺!"; 38 window.localStorage.aaa = "this is test!"; 39 window.localStorage.removeItem("aaa"); 40 41 console.log("-------------------------------------------------"); 42 var storage = window.localStorage; 43 var data = { 44 name: 'xiecanyong', 45 sex: 'man', 46 hobby: 'program' 47 }; 48 var d = JSON.stringify(data); 49 console.log(typeof d); 50 storage.setItem("data", d); 51 console.log(storage.data); 52 53 var json = storage.getItem("data"); 54 var jsonObj = JSON.parse(json); 55 console.log(typeof jsonObj); 56 console.log(storage.data); 57 }else{ 58 alert("瀏覽器不支持localstorage"); 59 return false; 60 } 61 } 62 </script> 63 </body> 64 65 </html>
純文字版代碼1：
//localStorage的瀏覽器支持情況：
//1. 判斷瀏覽器是否支持localStorage這個屬性
if(！window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
//主邏輯業務
}
//localStorage的寫入、修改、刪除、讀取
if(！window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//寫入或修改a字段
storage["a"]=1;
//寫入或修改b字段
storage.b=1;
//寫入或修改c字段
storage.setItem("c",3);
console.log(typeof storage["a"]); //string
console.log(typeof storage["b"]); //string
console.log(typeof storage["c"]); //string
//localStorage的鍵獲取
for(var i=0;i<storage.length;i++){
//使用key()方法，向其中出入索引即可獲取對應的鍵
var key=storage.key(i);
console.log(key);
}
//存儲json
//localStorage只支持string類型的存儲。
/*
一般我們會將JSON存入localStorage中，但是在localStorage會自動將localStorage轉換成為字符串形式
這個時候我們可以使用JSON.stringify()這個方法，來將JSON轉換成為JSON字符串
*/
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
//讀取之后使用JSON.parse()方法將JSON字符串轉換成為JSON對象，
//將localStorage中的某個鍵值對刪除
storage.removeItem("a");
//將localStorage的所有內容清除
storage.clear();
}
純文字版代碼2：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
if(window.localStorage){
//主邏輯業務
window.localStorage.clear(); //清除所有的變量和值
window.localStorage.a = 100;
window.localStorage["b"] = 200;
window.localStorage.setItem("c", 300);
console.log("window.localStorage.a=" + window.localStorage.a);
console.log("window.localStorage['b']=" + window.localStorage["b"]);
console.log("window.localStorage.getItem('c')=" + window.localStorage.getItem("c"));
console.log(window.localStorage);
console.log(typeof window.localStorage);
for (var i = 0; i < window.localStorage.length; i++) {
var key1 = window.localStorage.key(i);
var key2 = window.localStorage.getItem(key1);
console.log("字段名：" + key1 + " 值：" + key2);
}
console.log(typeof window.localStorage.a);
console.log(typeof window.localStorage['b']);
console.log(typeof window.localStorage.getItem('c'));
console.log("空了：" + window.localStorage);
window.localStorage.SB = "我是你大爺!";
window.localStorage.aaa = "this is test!";
window.localStorage.removeItem("aaa");
console.log("-------------------------------------------------");
var storage = window.localStorage;
var data = {
name: 'xiecanyong',
sex: 'man',
hobby: 'program'
};
var d = JSON.stringify(data);
console.log(typeof d);
storage.setItem("data", d);
console.log(storage.data);
var json = storage.getItem("data");
var jsonObj = JSON.parse(json);
console.log(typeof jsonObj);
console.log(storage.data);
}else{
alert("瀏覽器不支持localstorage");
return false;
}
}
</script>
</body>
</html>
done!