HTML5本地存储

什么是Web Storage

Web Storage是HTML5里面引入的一个类似于cookie的本地存储功能，可以用于客户端的本地存储，其相对于cookie来说有以下几点优势：

存储空间大：cookie只有4KB的存储空间，而Web Storage在官方建议中为每个网站5M。
可选择性强：Web Storage分为两种：sessionStorage和localStorage

Web Storage的使用方法

在使用上，session Storage和local Storage大同小异，只是session Storage是将数据临时存储在session中，浏览器关闭，数据随之消失。而local Storage则是将数据存储在本地，理论上来说数据永远不会消失，除非人为删除。

API：

保存数据 localStorage.setItem( key, value ); sessionStorage.setItem( key, value );
读取数据 localStorage.getItem( key ); sessionStorage.getItem( key );
删除单个数据localStorage.removeItem( key ); sessionStorage.removeItem( key );
删除全部数据localStorage.clear( ); sessionStorage.clear( );
获取索引的keylocalStorage.key( index ); sessionStorage.key( index );

注意：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; } }