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究竟是怎么存储的

咱们能够在chrome开发者工具里面找到Application这个选项，其中就有今天的主角：Local Storage和Session Storage

如今输入一些数据

点击提交以后咱们马上就能在Local Storage里面看到明文存储的数据（后面的value是以JSON对象来存储的，因此在对其进行操做的时候须要转换格式）

总结

Web Storage当然简单实用，可是数据的明文存储实在是硬伤，因此各位使用以前请三思