本地存儲localStorage以及它的封裝接口store.js的使用

本地存儲localstorage

localstorage 是 HTML5 提供的在客戶端存儲數據的新方法，主要作用是將數據保存在客戶端中，並且數據是永久保存的，除非人為干預刪除。

localstorage作為本地存儲來使用，解決了cookie存儲空間不足的問題：cookie中每條cookie的存儲空間為4k，但localStorage的存儲空間有5M大小。另外，相比於cookie，localStorage可以節約帶寬，在同一個域內，瀏覽器每次向服務器發送請求，http都會帶着cookie，使cookie在瀏覽器和服務器之間來回傳遞，浪費帶寬，但localStorage將第一次請求的數據直接存儲到本地，避免了來回傳遞。

localstorage 的局限
1、只有版本較高的瀏覽器中才支持 localstorage
2、localStorage的值的類型限定為string類型，使用 JSON 時需轉換
3、如果存儲內容過多會消耗內存空間，導致頁面變卡，因為localStorage本質上是對字符串的讀取

localstorage 有兩種方法：分別是 localstorage 和 sessionStorage 。sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除。localStorage與sessionStorage的唯一區別就是localStorage屬於永久性存儲，而sessionStorage在當會話結束的時候，sessionStorage中的鍵值對會被清空。

localstorage的用法
我們在使用localStorage的時候，需要先判斷瀏覽器是否支持localStorage這個屬性：

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

接下來分別是它的寫入、讀取、刪除

//localStorage的寫入 var storage=window.localStorage; storage["a"]=1; //寫入a字段 storage.b=2; //寫入b字段 storage.setItem("c",3); //寫入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的所有內容清除 

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

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); //a c }​

對用戶訪問頁面的次數進行計數:

if(localStorage.pagecount){ localStorage.pagecount = Number(localStorage.pagecount)+1; }else{ localStorage.pagecount = 1; } document.write("你第"+localStorage.pagecount+"訪問該頁面");​

sessionStorage的用法和localStorage一樣用法和localStorage一樣，但是關閉計數頁面后再打開時會重新開始計數。

store.js

GitHub地址
store.js 是一個兼容所有瀏覽器的 LocalStorage 包裝器，不需要借助 Cookie 或者 Flash來實現。它提供非常了簡潔的 API 來實現跨瀏覽器的本地存儲功能。

store.js的使用

store.js的基本API有：

store.set(key, val) //存儲 key 的值為 val； store.get(key) //獲取 key 的值； store.remove(key) //移除 key 的記錄； store.clear() //清空存儲； store.getAll() //返回所有存儲； store.forEach() //遍歷所有存儲。 

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

<script type="text/javascript" src="store.min.js"></script> 

首先判斷瀏覽器是否支持本地存儲

<script type="text/javascript"> init(); function init(){ if(!store.enabled){ alert("你的瀏覽器不支持本地存儲，請使用更高版本的瀏覽器"); return; }else{ ...... } </script> 

set
單個存儲字符
格式：store.set(key, data[, overwrite]);

store.set('name','mavis'); //存儲name的值為 mavis store.set('name','angel'); //將name的值存儲為angel

在控制台顯示

get
獲取存入的key值
格式：store.get(key[, alt])

store.set('name','mavis'); store.set('name','angel'); store.get('name'); //angel

remove
移除key的記錄

store.remove('name');

在控制台可以看到name的值已經被移除

clear
清除所有本地存儲：store.clear();

getAll
從所有存儲中獲取值
格式：store.getAll()

store.set('name','mavis'); store.getAll().user.name == 'mavis'; //true

forEach
遍歷所有的值

store.set('user',{name:'mavis',likes:'javascript'}); // 存儲對象 - 自動調用 JSON.stringify var user = store.get('user'); // 獲取存儲的對象 - 自動執行 JSON.parse store.forEach(function(key, val) { console.log(key, '==', val) }) // 遍歷所有存儲

使用store,js簡化了使用localStorage原生方法的操作 LocalStorage 並沒有提供過期時間接口，只能通過存儲時間做比對實現。 

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