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

时间：2022-04-05 20:37:16

Web存储

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

存储对象分类

  1. localStorage：没有时间限制的数据存储
  2. 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…..）。

相关文章