HTML5神助攻！快速解决客户端数据存储难题

HTML5本地存储介绍

现在网络发展超级快，而且网页应用程序也越来越实用。但是，随着这些程序的增多，咱不得不面对这么个困扰——客户端的数据要保存在哪里呀？曾经我们尝试过 Cookie 来搞定这个麻烦事儿，但说实话，实用性实在是差强人意。而今咱们已经有了 HTML5，Web Storage 真可谓是个神助攻，提供了一种既简单又好用的存储方式。

Web Storage优势与特点

Web Storage比cookie强在哪里？简单说，它不用每次 HTTP请求都背那么多包袱，数据量小传输快。另外，存储容量也大很多，每个站点可用到5MB而且，传输过程还会加密处理，安全性比 cookie 要高出许多喔！

Session Storage与Local Storage

你听说过Web Storage吗？就是帮我们电脑存储东西的东东。这儿有俩老大，Session Storage和Local Storage。Session Storage就是个短暂的单身宿舍，登录之后放点东西，退出来啥都没；Local Storage相当于一个超级大仓库，只有你自己砸或程序清空才会消失。想操作SessinoStorage和Local Storage就去window对象那儿找它们呗！

Web Storage API

“Web Storage”这么好用，操作起来就跟日常聊天似的舒服。它给了我们很多指令API，简直就是个操作指南，帮我们更好理解并发挥这些功能。举例说，用 localStorage.key(index)就是找某一个关键词在哪里；要是想知道这个关键词到底是啥，调用 localStorage.getItem(key)就好使；接着，with localStorage.setItem(key,value)就可以把这个关键词和相应数值给记住；最后那，想删除时，用 localStorage.removeItem(key)轻轻一点就行。而且别忘了，这些都得基于字符串！

    
    
    
        #content{   
            border: 1px solid #3D19DD;   
            width:600px;   
            text-align:center;   
            padding: 10px 0;   
            margin: 0 auto;   
        }   
        #content input{   
            margin-top: 10px;   
        }   
    


    

         学号：
        
        

        姓名：
        
        

        年级：
        
        

        性别：
        
        

        
        

        输入学号：
        
        
        


        

         
         

         
    

    

利用JSON存储多个数据

如果你想要记忆和存储复杂点的信息，比如学生资料什么的，就试试JSON！先把这些信息变为JSON对象保存在Local Storage里面，接着找个关键词来定位。写入时，要用JSON.stringify（）把它们转变为String格式；读取时，再使用JSON.parse（）将其还原回来。

操作示例：保存学生信息

function save(){     
        var user_num = document.getElementById("user_num").value;   
        var user_nameElement = document.getElementById("user_name").value;   
        var gradeElement = document.getElementById("grade").value;     
        var sexElement = document.getElementById("sex").value;   
        var msg = {   
            user_name: user_nameElement,   
            grade: gradeElement,   
            sex: sexElement,   
        };    
        localStorage.setItem(user_num,JSON.stringify(msg));     
    }

我们要保存几个同学的数据（包括学号、姓名、年龄和性别），首先得创建一个数组 students来装这些信息。然后，每个同学的信息变成字符串格式后，就放进Local Storage里去。想查看某个同学的信息，输入他/她的学号就行了！

处理非字符串类型数据

玩儿多媒体不光有文字，有时候还得贴点图啥的。这里有个神器叫Data URI，可以把图变成字串保存起来。首先弄个Canvas画布让图展现出来，接着读取Data URI的内容，之后保存到本地。下次要找这图，直接在Local Storage里找就好。

function find(){     
        var user_num = document.getElementById("search_num").value;    
        var str = localStorage.getItem(user_num);    
        var msg = JSON.parse(str);    
        var find_result = document.getElementById("find_result");     
        find_result.innerHTML = "学号为："+user_num+"的基本信息： 姓名："+msg.user_name + "，年级：" + msg.grade+",性别："+msg.sex;     
    }

总结与展望

读了这片文，你就能搞清楚HTML5上的这个Web Storage咋用了，怎么实际操练。比方说，我们了解到Session Storage是短期的，而Local Storage就是长期的。另外，怎么利用JSON存东西和玩转各种各样的数据，这些知识，只有咱们才能理解透彻。当然，等网络技术越来越先进，Web Storage肯定也会变得更有用！

function show(){     
        var list = document.getElementById("list");     
        if(localStorage.length>0){     
            var result = "";     
            result += "";     
            for(var i=0;i<localStorage.length;i++){     
                var user_num = localStorage.key(i);     
                var str = localStorage.getItem(user_num);     
                var msg = JSON.parse(str);     
                result += "";     
            }     
            result += "
学号
姓名
年级
性别
"+user_num+"
"+msg.user_name+"
"+msg.grade+"
"+msg.sex+"
";     
            list.innerHTML = result;     
          }else{     
                list.innerHTML = "当前还没有数据";     
          }     
    }

咱们来聊聊HTML5 Web Storage这个很实用的东西，大家可得认真听听！

。