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

最新推荐文章于 2021-07-21 15:48:33 发布

辛苦的码农20200609

最新推荐文章于 2021-07-21 15:48:33 发布

阅读量242

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjjajkikai1j.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

Web存储

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

存储对象分类

localStorage：没有时间限制的数据存储，localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
sessionStorage：针对一个会话的数据存储，sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此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…..）。

Web Storage和Cookie的比较

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

辛苦的码农20200609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【html5】Web存储_locaStorage对象的应用

Web存储html5可以在本地存储用户浏览的数据，数据的存储原理是以键/值存储的存储对象分类localStorage：没有时间限制的数据存储，localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。sessionStorage：针对一个会话的数据存储，sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是.
复制链接

扫一扫