zoukankan      html  css  js  c++  java
  • Cookie, LocalStorage 与 SessionStorage说明

     一、Cookie 

      Cookie 大小限制为4KB左右,不适合大量数据的存储。因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

    HttpCookie cookie = new HttpCookie("MyCookieName", "string value");
    Response.Cookies.Add(cookie);

    二、localStorage

     localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

    示例如下

     <!DOCTYPE html>
     <html>
     <body>
    
    <div id="result"></div>
    
     <script>
    
    if (typeof(Storage) !== "undefined") {
       // 存储
       localStorage.setItem("lastname", "Gates");
        // 检索
      document.getElementById("result").innerHTML = localStorage.getItem("lastname");
     } else {
         document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
    }
     </script></body>

    </html>

    三、sessionStorage

    sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function clickCounter() {
        if(typeof(Storage) !== "undefined") {
            if (sessionStorage.clickcount) {
                sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
            } else {
                sessionStorage.clickcount = 1;
            }
            document.getElementById("result").innerHTML = "在本 session 中,您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
        } else {
            document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
        }
    }
    </script>
    </head>
    <body>
    <p><button onclick="clickCounter()" type="button">请点击这里</button></p>
    <div id="result"></div>
    <p>请点击按钮使计数器递增。</p>
    <p>请关闭浏览器或标签页,然后再试一次,计数器会重置。</p>
    </body>
    </html>

    三、三者异同

    特性CookielocalStoragesessionStorage
    数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下有效,关闭页面或浏览器后被清除
    存放数据大小 4K左右 一般为5MB 一般为5MB
    与服务器端通信 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 仅在客户端(即浏览器)中保存,不参与和服务器的通信 仅在客户端(即浏览器)中保存,不参与和服务器的通信
    易用性 需要程序员自己封装,源生的Cookie接口不友好 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持

    参考文档:https://segmentfault.com/a/1190000002723469

                 http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html

  • 相关阅读:
    [SCM]源码管理 perforce的权限管理
    [BuildRelease]产品和文件版本号
    删除所有的.svn 文件
    [SCM]源码管理 perforce快速入门
    6个Linux chkconfig命令实例 增加,删除,查看和修改services的自动启动选项
    [SCM]源码管理 perforce管理员需要知道的命令
    [SCM]源码管理 perforce与分布式团队的开发
    [SCM]源码管理 perforce命令行高级
    PHP aes加密 mcrypt转openssl问题;
    《Excel与VBA程序设计》第四章更新
  • 原文地址:https://www.cnblogs.com/wanxiangIT/p/6396638.html
Copyright © 2011-2022 走看看