• HTML5在客户端存储数据的新方法——localStorage


    HTML5在客户端存储数据的新方法——localStorage

     
    localStorage作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中,而客户端一般是指上海网站设计用户的计算机。在移动设备上,由于大部分浏览器都支持web storage特性,因此在android和ios等智能手机上的web浏览器都能正常使用该特性。
    localStorage保存的数据,一般情况下是永久保存的,也就是说只要采用localstorage保存信息,数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动,数据让然存在。知道用户或程序明确制定删除,数据的生命周期才会结束。
     
     
    cookie、 sessionStorage 、localStorage之间的区别和使用
    •  cookie:存储在用户本地终端上的数据。有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站
          HTML5 提供了两种在客户端存储数据的新方法:
    • localStorage - 没有时间限制的数据存储
    • sessionStorage - 针对一个 session 的数据存储
         之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
     
     
     
    使用场景:
    localStorage可以用来统计页面访问次数。
    sessionStorage可以用来统计当前页面元素的点击次数。
    cookie一般存储用户名密码相关信息,一般使用escape转义编码后存储。
     
     
    使用实例:
     
    刷新页面会看到计数器在增长。请关闭浏览器窗口,然后再试一次,计数器会继续计数。localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
    document.write("Visits "+ localStorage.pagecount + " time(s).");
     
    <!DOCTYPE html>
    <html>
         <head>
              <meta charset="UTF-8">
              <title></title>
         </head>
         <body>
         </body>
         <script type="text/javascript">
    if (localStorage.pagecount)
      {
      localStorage.pagecount=Number(localStorage.pagecount) +1;
      }
    else
      {
      localStorage.pagecount=1;
      }
    document.write("Visits "+ localStorage.pagecount + " time(s).");
    </script>
    </html>
     
    重置:
    刷新页面会看到计数器在增长。
    请关闭浏览器窗口,然后再试一次,计数器已经重置了。
     
     
    document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
     
     
     
    <!DOCTYPE html>
    <html>
         <head>
              <meta charset="UTF-8">
              <title></title>
         </head>
         <body>
         </body>
         <script type="text/javascript">
    if (sessionStorage.pagecount)
        {
        sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
        }
    else
        {
        sessionStorage.pagecount=1;
        }
    document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
    </script>
    </html>
     
     
     
    注意:nternet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
    注意: Internet Explorer 7 及更早IE版本不支持web 存储.
    因此:在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
     
    if(typeof(Storage)!=="undefined")
    {
         // 是的! 支持 localStorage sessionStorage 对象!
         // 一些代码.....
    } else {
              // 抱歉! 不支持 web 存储。
    }
  • 相关阅读:
    Element库的Vue版本ElementUI的本地引入方法
    在Win7操作系统上安装VS2017报错:安装程序清单签名验证失败
    [转]五大主流浏览器及四大内核
    [转]idea2021.1破解版 附安装教程免激活码
    [转]Node.js安装详细步骤教程(Windows版)
    [转]Windows系统下彻底删除Windows.old 文件夹的方法
    Springboot+Vue进行Web开发时特别需要注意的小事项
    基带信号与频带信号,基带传输与频带传输各是什么?两者有什么区别?
    springboot的Web项目编译运行时提示错误:Field userService in com.cetc.UserManger.controller.UserController required a bean of type 'com.cetc.UserManger.service.UserService' that could not be found.
    创建springboot项目时出现Selected Java version 11 is not supported by SDK (maximum 8)
  • 原文地址:https://www.cnblogs.com/wangting888/p/8067292.html
Copyright © 2020-2023  润新知