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

本地存儲localstorage

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

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

localstorage 的侷限
一、只有版本較高的瀏覽器中才支持 localstorage
二、localStorage的值的類型限定爲string類型，使用 JSON 時需轉換
三、若是存儲內容過多會消耗內存空間，致使頁面變卡，由於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