摘要：什么是是里面引入的一個(gè)類似于的本地存儲功能，可以用于客戶端的本地存儲，其相對于來說有以下幾點(diǎn)優(yōu)勢存儲空間大只有的存儲空間，而在官方建議中為每個(gè)網(wǎng)站。而則是將數(shù)據(jù)存儲在本地，理論上來說數(shù)據(jù)永遠(yuǎn)不會消失，除非人為刪除。

Web Storage是HTML5里面引入的一個(gè)類似于cookie的本地存儲功能，可以用于客戶端的本地存儲，其相對于cookie來說有以下幾點(diǎn)優(yōu)勢：

存儲空間大：cookie只有4KB的存儲空間，而Web Storage在官方建議中為每個(gè)網(wǎng)站5M。

可選擇性強(qiáng)：Web Storage分為兩種：sessionStorage和localStorage

在使用上，session Storage和local Storage大同小異，只是session Storage是將數(shù)據(jù)臨時(shí)存儲在session中，瀏覽器關(guān)閉，數(shù)據(jù)隨之消失。而local Storage則是將數(shù)據(jù)存儲在本地，理論上來說數(shù)據(jù)永遠(yuǎn)不會消失，除非人為刪除。

API：

保存數(shù)據(jù) localStorage.setItem( key, value ); sessionStorage.setItem( key, value );

讀取數(shù)據(jù) localStorage.getItem( key ); sessionStorage.getItem( key );

刪除單個(gè)數(shù)據(jù)localStorage.removeItem( key ); sessionStorage.removeItem( key );

刪除全部數(shù)據(jù)localStorage.clear( ); sessionStorage.clear( );

獲取索引的keylocalStorage.key( index ); sessionStorage.key( index );

注意：Web Storage的API只能操作字符串

在使用Web Storage之前，我們需要注意以下幾點(diǎn)：

僅支持支持IE8及以上版本

由于只能對字符串類型數(shù)據(jù)進(jìn)行操作，所以對一些JSON對象需要進(jìn)行轉(zhuǎn)換

因?yàn)槭敲魑拇鎯?，所以毫無隱私性可言，絕對不能用于存儲重要信息

會是瀏覽器加載速度在一定程度上變慢

無法被爬蟲程序爬取

使用Web Storage之前，請加上以下代碼，對瀏覽器對Web Storage的支持性進(jìn)行判斷

if(window.localStorage){//或者window.sessionStorage     
    alert("瀏覽器支持localStorage")
    //主邏輯業(yè)務(wù)
}else{      
    alert("瀏覽不支持localStorage")
    //替代方法
}   
  

我們來寫一個(gè)學(xué)生管理小程序用于演示W(wǎng)eb Storage的基本用法

簡單的html頁面先準(zhǔn)備好

    
     
        學(xué)生姓名:  
          
        

        性別:  
          
        

        學(xué)號:  
          
        

        家庭住址:  
          
        

        電話號碼:  
          
        
  
        
        

        
        

        輸入姓名：    
        
        
 
        
        

        輸入姓名：    
        
        
 
        
        

    
  
    
  
    

    

在這個(gè)程序里面我們將實(shí)現(xiàn)增刪查的基本功能，修改數(shù)據(jù)的功能相信大家看完后自己就能寫出來。

接下來開始寫方法：

存儲

//利用localStorage存儲數(shù)據(jù)
function save() {
    var contact = new Object();
    var Name = document.getElementById("name").value;
    var Sex = document.getElementById("sex").value;
    var Num = document.getElementById("num").value;
    var Add = document.getElementById("add").value;
    var Tel = document.getElementById("tel").value;
    if(JTrim(Name) != "" && JTrim(Sex) != "" && JTrim(Num) != "" && JTrim(Add) != "" && JTrim(Tel) != "") {
        contact.name = Name;
        contact.sex = Sex;
        contact.num = Num;
        contact.add = Add;
        contact.tel = Tel;
        var str = JSON.stringify(contact);//對JSON對象進(jìn)行處理，用于從一個(gè)對象解析出字符串
        if(window.localStorage) {
            localStorage.setItem(contact.name,str);
        } else {
            alert("您暫時(shí)還無法使用本功能");
            return;
        }
    } else {
        alert("請輸入內(nèi)容");
    }
}

其中用到了Trim()這個(gè)方法，用于判斷輸入是否為空

function JTrim(s) {
    return s.replace(/(^s*)|(s*$)/g, "");
}

展示所有信息

function loadAll() {
    var resource = document.getElementById("list");
    if(window.localStorage) {
        var result = "";
        result += "";
        for(var i = 0;i < localStorage.length; i++) {
            var Name = localStorage.key(i);//用于得到索引的key，在這個(gè)程序里，key為name
            var str = localStorage.getItem(Name);
            var contact = JSON.parse(str);//對JSON對象進(jìn)行處理，用于從一個(gè)字符串中解析出JSON對象
            result += ""; 
        }
        result += "
姓名
性別
學(xué)號
家庭住址
電話號碼
"+contact.name+"
"+contact.sex+"
"+contact.num+"
"+contact.add+"
"+contact.tel+"
";
        resource.innerHTML = result;
    } else {
        alert("您暫時(shí)還無法使用本功能");
        return;
    }
}

查詢

function search() {
    var resource = document.getElementById("tato");
    var search_name = document.getElementById("search_name").value;
    if(window.localStorage) {
        var str = localStorage.getItem(search_name);
        if(str != null) {
            var result = "";
            result += "";
            var contact = JSON.parse(str);
            result += "";
            result += "
姓名
性別
學(xué)號
家庭住址
電話號碼
"+contact.name+"
"+contact.sex+"
"+contact.num+"
"+contact.add+"
"+contact.tel+"
";
            resource.innerHTML = result;            
        } else {
            alert("系統(tǒng)無此人");
            return;
        }

    } else {
        alert("您暫時(shí)還無法使用本功能");
        return;
    }  
}

刪除

function del() {
    var del_name = document.getElementById("del_name").value;
    if(window.localStorage) {
        var result = localStorage.getItem(del_name);
        localStorage.removeItem(del_name);
        if(result != null) {
            alert("刪除成功");           
        } else {
            alert("系統(tǒng)無此人");
            return;
        }

    } else {
        alert("您暫時(shí)還無法使用本功能");
        return;        
    }
}

在這里如果想對所有數(shù)據(jù)做刪除處理則只需將localStorage.removeItem();換成localStorage.clear();即可

Demo地址--魔改了一下界面，開心就好=.=

現(xiàn)在讓我們在瀏覽器的開發(fā)者工具里面看一看Web Storage到底是怎么存儲的

我們可以在chrome開發(fā)者工具里面找到Application這個(gè)選項(xiàng)，其中就有今天的主角：Local Storage和Session Storage

現(xiàn)在輸入一些數(shù)據(jù)

點(diǎn)擊提交之后我們立刻就能在Local Storage里面看到明文存儲的數(shù)據(jù)（后面的value是以JSON對象來存儲的，所以在對其進(jìn)行操作的時(shí)候需要轉(zhuǎn)換格式）

Web Storage固然簡單實(shí)用，但是數(shù)據(jù)的明文存儲實(shí)在是硬傷，所以各位使用之前請三思