摘要：本地存儲(chǔ)是提供的在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法，主要作用是將數(shù)據(jù)保存在客戶(hù)端中，并且數(shù)據(jù)是永久保存的，除非人為干預(yù)刪除。的使用的基本有存儲(chǔ)的值為獲取的值移除的記錄清空存儲(chǔ)返回所有存儲(chǔ)遍歷所有存儲(chǔ)。

localstorage 是 HTML5 提供的在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法，主要作用是將數(shù)據(jù)保存在客戶(hù)端中，并且數(shù)據(jù)是永久保存的，除非人為干預(yù)刪除。

localstorage作為本地存儲(chǔ)來(lái)使用，解決了cookie存儲(chǔ)空間不足的問(wèn)題：cookie中每條cookie的存儲(chǔ)空間為4k，但localStorage的存儲(chǔ)空間有5M大小。另外，相比于cookie，localStorage可以節(jié)約帶寬，在同一個(gè)域內(nèi)，瀏覽器每次向服務(wù)器發(fā)送請(qǐng)求，http都會(huì)帶著cookie，使cookie在瀏覽器和服務(wù)器之間來(lái)回傳遞，浪費(fèi)帶寬，但localStorage將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地，避免了來(lái)回傳遞。

localstorage 的局限
1、只有版本較高的瀏覽器中才支持 localstorage
2、localStorage的值的類(lèi)型限定為string類(lèi)型，使用 JSON 時(shí)需轉(zhuǎn)換
3、如果存儲(chǔ)內(nèi)容過(guò)多會(huì)消耗內(nèi)存空間，導(dǎo)致頁(yè)面變卡，因?yàn)閘ocalStorage本質(zhì)上是對(duì)字符串的讀取

localstorage 有兩種方法：分別是 localstorage 和 sessionStorage 。sessionStorage 方法針對(duì)一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶(hù)關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。localStorage與sessionStorage的唯一區(qū)別就是localStorage屬于永久性存儲(chǔ)，而sessionStorage在當(dāng)會(huì)話結(jié)束的時(shí)候，sessionStorage中的鍵值對(duì)會(huì)被清空。

localstorage的用法
我們?cè)谑褂胠ocalStorage的時(shí)候，需要先判斷瀏覽器是否支持localStorage這個(gè)屬性：

if(window.localStorage){
 alert("瀏覽器支持localStorage");
 
 }else{
 alert("瀏覽器支持localStorage");
 }??

接下來(lái)分別是它的寫(xiě)入、讀取、刪除

//localStorage的寫(xiě)入
var storage=window.localStorage;
 storage["a"]=1;   //寫(xiě)入a字段
 storage.b=2;   //寫(xiě)入b字段
 storage.setItem("c",3);   //寫(xiě)入c字段
 console.log(typeof storage["a"]);  //string
 console.log(typeof storage["b"]);  //string
 console.log(typeof storage["c"]);??//string 
//localStorage的讀取
var a=storage.a;
 console.log(a);  //1
var b=storage["b"];
 console.log(b);  //2
var c=storage.getItem("c");
 console.log(c);??  //3
//localStorage的刪除
storage.clear();  //將localStorage的所有內(nèi)容清除

使用key()方法，獲取相應(yīng)的鍵

var storage=window.localStorage;
 storage.a=1;
 storage.setItem("c",3);
 for(var i=0;i
對(duì)用戶(hù)訪問(wèn)頁(yè)面的次數(shù)進(jìn)行計(jì)數(shù):
if(localStorage.pagecount){
 localStorage.pagecount = Number(localStorage.pagecount)+1;
 }else{
 localStorage.pagecount = 1;
 }
 document.write("你第"+localStorage.pagecount+"訪問(wèn)該頁(yè)面");??
sessionStorage的用法和localStorage一樣用法和localStorage一樣，但是關(guān)閉計(jì)數(shù)頁(yè)面后再打開(kāi)時(shí)會(huì)重新開(kāi)始計(jì)數(shù)。
store.js
GitHub地址
store.js 是一個(gè)兼容所有瀏覽器的 LocalStorage 包裝器，不需要借助 Cookie 或者 Flash來(lái)實(shí)現(xiàn)。它提供非常了簡(jiǎn)潔的 API 來(lái)實(shí)現(xiàn)跨瀏覽器的本地存儲(chǔ)功能。
store.js的使用 
store.js的基本API有：
store.set(key, val)  //存儲(chǔ) key 的值為 val；
store.get(key)  //獲取 key 的值；
store.remove(key) //移除 key 的記錄；
store.clear()  //清空存儲(chǔ)；
store.getAll() //返回所有存儲(chǔ)；
store.forEach() //遍歷所有存儲(chǔ)。

使用store.js提供的方法，需要先引入store.min.js插件:
 

首先判斷瀏覽器是否支持本地存儲(chǔ)
  
set
單個(gè)存儲(chǔ)字符
格式：store.set(key, data[, overwrite]);
store.set("name","mavis"); //存儲(chǔ)name的值為 mavis
store.set("name","angel");  //將name的值存儲(chǔ)為angel
在控制臺(tái)顯示

get
獲取存入的key值
格式：store.get(key[, alt])
store.set("name","mavis");
store.set("name","angel");
store.get("name");  //angel
remove
移除key的記錄
store.remove("name");
在控制臺(tái)可以看到name的值已經(jīng)被移除

clear
清除所有本地存儲(chǔ)：store.clear();
getAll
從所有存儲(chǔ)中獲取值
格式：store.getAll()
store.set("name","mavis");
store.getAll().user.name == "mavis";   //true
forEach
遍歷所有的值
store.set("user",{name:"mavis",likes:"javascript"}); // 存儲(chǔ)對(duì)象 - 自動(dòng)調(diào)用 JSON.stringify
var user = store.get("user"); // 獲取存儲(chǔ)的對(duì)象 - 自動(dòng)執(zhí)行 JSON.parse
store.forEach(function(key, val) {
                  console.log(key, "==", val)
            })  // 遍歷所有存儲(chǔ)

使用store,js簡(jiǎn)化了使用localStorage原生方法的操作

LocalStorage 并沒(méi)有提供過(guò)期時(shí)間接口，只能通過(guò)存儲(chǔ)時(shí)間做比對(duì)實(shí)現(xiàn)。

最后介紹一下在瀏覽器中查看LocalStorage的方法：F12打開(kāi)開(kāi)發(fā)人員工具→Application→Storage→LocalStorage