Web Storage--HTML5本地存儲

時間 2019-11-07

標籤 web storage html5 html 本地存儲欄目 HTML 简体版

原文原文鏈接

什麼是Web Storage

Web Storage是HTML5裏面引入的一個相似於cookie的本地存儲功能，能夠用於客戶端的本地存儲，其相對於cookie來講有如下幾點優點：html

存儲空間大：cookie只有4KB的存儲空間，而Web Storage在官方建議中爲每一個網站5M。chrome
可選擇性強：Web Storage分爲兩種：sessionStorage和localStorage小程序

Web Storage的使用方法

在使用上，session Storage和local Storage大同小異，只是session Storage是將數據臨時存儲在session中，瀏覽器關閉，數據隨之消失。而local Storage則是將數據存儲在本地，理論上來講數據永遠不會消失，除非人爲刪除。瀏覽器

API：cookie

保存數據 localStorage.setItem( key, value ); sessionStorage.setItem( key, value );session
讀取數據 localStorage.getItem( key ); sessionStorage.getItem( key );工具
刪除單個數據localStorage.removeItem( key ); sessionStorage.removeItem( key );網站
刪除所有數據localStorage.clear( ); sessionStorage.clear( );spa
獲取索引的keylocalStorage.key( index ); sessionStorage.key( index );localstorage

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

在使用Web Storage以前，咱們須要注意如下幾點：

僅支持支持IE8及以上版本
因爲只能對字符串類型數據進行操做，因此對一些JSON對象須要進行轉換
由於是明文存儲，因此毫無隱私性可言，絕對不能用於存儲重要信息
會是瀏覽器加載速度在必定程度上變慢
沒法被爬蟲程序爬取

使用Web Storage以前，請加上如下代碼，對瀏覽器對Web Storage的支持性進行判斷

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

咱們來寫一個學生管理小程序用於演示Web Storage的基本用法

簡單的html頁面先準備好

<div style="border: 2px dashed #ccc;width:320px;float: left;">     
        <label for="name">學生姓名:</label>  
        <input type="text" id="name" name="name"/>  
        <br/>
        <label for="sex">性別:</label>  
        <input type="text" id="sex" name="sex"/>  
        <br/>
        <label for="num">學號:</label>  
        <input type="text" id="num" name="num"/>  
        <br/>
        <label for="add">家庭住址:</label>  
        <input type="text" id="add" name="add"/>  
        <br/>
        <label for="tel">電話號碼:</label>  
        <input type="text" id="tel" name="tel"/>  
        <br/>  
        <input type="button" onclick="save()" value="提交信息"/>
        <hr/>
        <input type="button" onclick="loadAll()" value="查看全部"/>
        <hr/>
        <label for="search_name">輸入姓名：</label>    
        <input type="text" id="search_name" name="search_name"/>
        <br/> 
        <input type="button" onclick="search()" value="查詢"/>
        <hr/>
        <label for="del_name">輸入姓名：</label>    
        <input type="text" id="del_name" name="del_name"/>
        <br/> 
        <input type="button" onclick="del()" value="刪除"/>
        <hr/>
    </div>  
    <br/>  
    <div id="list"></div>
    <div id="tato"></div>

在這個程序裏面咱們將實現增刪查的基本功能，修改數據的功能相信你們看完後本身就能寫出來。

接下來開始寫方法：

存儲

//利用localStorage存儲數據
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對象進行處理，用於從一個對象解析出字符串
        if(window.localStorage) {
            localStorage.setItem(contact.name,str);
        } else {
            alert("您暫時還沒法使用本功能");
            return;
        }
    } else {
        alert("請輸入內容");
    }
}

其中用到了Trim()這個方法，用於判斷輸入是否爲空

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

展現全部信息

function loadAll() {
    var resource = document.getElementById("list");
    if(window.localStorage) {
        var result = "<table border = '1'>";
        result += "<tr><td>姓名</td><td>性別</td><td>學號</td><td>家庭住址</td><td>電話號碼</td></tr>";
        for(var i = 0;i < localStorage.length; i++) {
            var Name = localStorage.key(i);//用於獲得索引的key，在這個程序裏，key爲name
            var str = localStorage.getItem(Name);
            var contact = JSON.parse(str);//對JSON對象進行處理，用於從一個字符串中解析出JSON對象
            result += "<tr><td>"+contact.name+"</td><td>"+contact.sex+"</td><td>"+contact.num+"</td><td>"+contact.add+"</td><td>"+contact.tel+"</td></tr>"; 
        }
        result += "</table>";
        resource.innerHTML = result;
    } else {
        alert("您暫時還沒法使用本功能");
        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 = "<table border = '1'>";
            result += "<tr><td>姓名</td><td>性別</td><td>學號</td><td>家庭住址</td><td>電話號碼</td></tr>";
            var contact = JSON.parse(str);
            result += "<tr><td>"+contact.name+"</td><td>"+contact.sex+"</td><td>"+contact.num+"</td><td>"+contact.add+"</td><td>"+contact.tel+"</td></tr>";
            result += "</table>";
            resource.innerHTML = result;            
        } else {
            alert("系統無此人");
            return;
        }

    } else {
        alert("您暫時還沒法使用本功能");
        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("系統無此人");
            return;
        }

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

在這裏若是想對全部數據作刪除處理則只需將localStorage.removeItem();換成localStorage.clear();便可

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

如今讓咱們在瀏覽器的開發者工具裏面看一看Web Storage究竟是怎麼存儲的