什么是Web Storage

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

1. 存储空间大：cookie只有4KB的存储空间，而Web Storage在官方建议中为每个网站5M。

2. 可选择性强：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之前，我们需要注意以下几点：

1. 仅支持支持IE8及以上版本

2. 由于只能对字符串类型数据进行操作，所以对一些JSON对象需要进行转换

3. 因为是明文存储，所以毫无隐私性可言，绝对不能用于存储重要信息

4. 会是浏览器加载速度在一定程度上变慢

5. 无法被爬虫程序爬取

6. 使用Web Storage之前，请加上以下代码，对浏览器对Web Storage的支持性进行判断

   if(window.localStorage){//或者window.sessionStorage         alert("浏览器支持localStorage")    //主逻辑业务}else{          alert("浏览不支持localStorage")    //替代方法}

我们来写一个学生管理小程序用于演示Web Storage的基本用法

简单的html页面先准备好

    
             
     学生姓名:          
               
     
        
     性别:          
               
     
        
     学号:          
               
     
        
     家庭住址:          
               
     
        
     电话号码:          
               
     
          
             
     
        
             
     
        
     输入姓名：            
             
     
         
             
     
        
     输入姓名：            
             
     
         
             
     
    
    
      
      
    
    
    

在这个程序里面我们将实现增删查的基本功能，修改数据的功能相信大家看完后自己就能写出来。

接下来开始写方法：

存储

//利用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 = "
    
     ";        result += "
";        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 += "
";         }        result += "
     
      
       
姓名
       
性别
       
学号
       
家庭住址
       
电话号码
      
      
       
"+contact.name+"
       
"+contact.sex+"
       
"+contact.num+"
       
"+contact.add+"
       
"+contact.tel+"
      
     
    
";        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 = "
    
     ";            result += "
";            var contact = JSON.parse(str);            result += "
";            result += "
     
      
       
姓名
       
性别
       
学号
       
家庭住址
       
电话号码
      
      
       
"+contact.name+"
       
"+contact.sex+"
       
"+contact.num+"
       
"+contact.add+"
       
"+contact.tel+"
      
     
    
";            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();即可

--魔改了一下界面，开心就好=.=

现在让我们在浏览器的开发者工具里面看一看Web Storage到底是怎么存储的

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

现在输入一些数据

点击提交之后我们立刻就能在Local Storage里面看到明文存储的数据（后面的value是以JSON对象来存储的，所以在对其进行操作的时候需要转换格式）

总结

Web Storage固然简单实用，但是数据的明文存储实在是硬伤，所以各位使用之前请三思