【html5】Web存储_locaStorage对象的应用

来源：互联网发布：数学专业程序员编辑：程序博客网时间：2024/06/09 17:27

Web存储

html5可以在本地存储用户浏览的数据，数据的存储原理是以键/值存储的

存储对象分类

localStorage：没有时间限制的数据存储
sessionStorage：针对一个会话的数据存储

常用的API

（以localStorage为例，sesstionStorage同理）

保存数据：localStorage.setIterm(key,value);

读取数据：localStorage.getIterm(key);

移除单个数据：localStorage.removeIterm(key);

移除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

点击计数：localStorage.clickcount();

实例（能够记忆用户的密码和账号）：

<!DOCTYPE html><html>  <head>    <title>登 录 页 面</title>    <meta name="content-type" content="text/html; charset=UTF-8">    <style>        div{border:2px groove #ddd};    </style>  </head>  <body onload = "loadAll()">    <form action = "afterlogin.jsp">        <div>        name:<input type = "text" name = "user" id = "user" onblur = "read()"><br>        password:<input type = "password" name = "pw" id = "pw"><br>        <input type = "checkbox" onclick = "choice()" name = "rem" id = "rem"><span id = "res">永远记住我</span><br>        </div>          <br>        登录：<input type = "image" src = "nexview.gif" width = "20px" height = "20px"alt = "Submit" title = "Submit" onclick= "save()">    </form>    <br>       <button onclick = "count()">点我</button>计数：<span id = "count"></span>    <div id = "list"></div>  <script>  function count(){    if(typeof(Storage)!=="undefined")    {            if (localStorage.clickcount)            {            localStorage.clickcount=Number(localStorage.clickcount)+1;            }            else            {            localStorage.clickcount=1;            }            document.getElementById("count").innerHTML="你已经点击了该按钮 " + localStorage.clickcount + " 次 ";    }    else    {            document.getElementById("count").innerHTML="抱歉，您的浏览器不支持 web 存储";    }  }    function choice(){        var cb = document.getElementById("rem");        if(cb.value != "1"){            cb.value = "1";            document.getElementById("res").innerHTML = "忘记我";        }else{            cb.value = "0";            document.getElementById("res").innerHTML = "永远记住我";        }    }    function save(){        //判断用户是否选择了记住用户名和密码        if(document.getElementById("rem").value = "1"){            //创建一个对象            var info = new Object;            //获得用户输入的值            info.user = document.getElementById("user").value;            info.pw = document.getElementById("pw").value;            //将对象转化为字符串            var str = JSON.stringify(info);            //将数据存储到localStorage中            localStorage.setItem(info.user,str);        }    }    function read(){        //获得用户输入的名称        var user = document.getElementById("user").value;        //通过用户用户名获得存储数据的对象        var str = localStorage.getItem(user);        //将对象转化为字符串        var sstr = JSON.parse(str);        var spw = document.getElementById("pw");        spw.value = sstr.pw;        }    //将所有存储在loadStorage中的对象提取出来    function loadAll(){        var list = document.getElementById("list");          if(localStorage.length>0){            var result = "<table border='1'>";              result += "<tr><td>用户</td><td>密码</td></tr>";              for(var i=0;i<localStorage.length;i++){                //依次获得每一个对象                 var user = localStorage.key(i);                var str = localStorage.getItem(user);                //将对象转化为字符串                var sstr = JSON.parse(str);                result += "<tr><td>"+user+"</td><td>"+sstr.pw+"</td></tr>";              }              result += "</table>";              list.innerHTML = result;          }else{              list.innerHTML = "数据为空...";          }      }  </script>  </body></html>

Web存储和jsp内置对象简单比较

相同点：

都可以作为一个容器来存网页中的数据

不同点：

Web存储用于HTML（静态网页）中，而JSP内置对象用于jsp（动态网页）中。
Web存储只有两种类型（localStorage、sessionStorage）， JSP的内置对象有十多个（application、session、request、config、exception、out、response、pageContext、page…..）。

0 0