h5--本地存储 sessionStorage,localstorage

时间:2022-06-30 16:49:55

几种存储方式的优缺点及适用场景

  • storage特点(sessionStorage,localStorage):

    1. 存储容量5M
    2. 客户端完成,不会请求服务器处理
    3. sessionStorage数据是不共享、 localStorage共享、
    4. api相同
      1. getItem //取记录

      2. setIten//设置记录

      3. removeItem//移除记录

      4. key//取key所对应的值

      5. clear//清除记录

    5. 存储内容
      1. 只要是能序列化成字符串的内容都可以存储

sessionStorage:

    1. 作用于当前的页面,新开页面或者关闭页面时候,数据消失;
    2. 不同浏览窗口数据不共享

localStorage:

    1. 始终存在,除非手动删除、
    2. 不同浏览器数据共享
当数据有修改或删除的情况下,就会触发storage事件
 
    在对数据进行改变的窗口对象上是不会触发的
注:session同窗口才可以,例子:iframe操作
   window.addEventListener( 'storage',function(e){
            console.log( e.key )//修改或删除的key值
            console.log( e.newValue )//新存储的值
            console.log( e.oldValue )//调用改变前的value
            console.log( e.storageArea )//当前的storage对象
            console.log( e.url )//触发该脚本变化的文档的url
         } ); 
  • cookie

    1. 特性

      1. cookie可以实现跨页面全局变量 
        cookie可以跨越同域名下的多个网页,但不能跨越多个域名使!用 
        同一个网站中所有页面共享一套cookie 
        可以设置有效期限 
        存储空间4-10KB左右
    2. 常用场合:

      1. 保存用户登录状态;

      2. 跟踪用户行为;

      3. 定制页面;

      4. 创建购物车 …等等 

    3. 缺点

      1. cookie可能被禁用;
      2. cookie与浏览器相关,不能互相访问;
      3. cookie可能被用户删除;
      4. cookie安全性不够高; 
      5. cookie存储空间很小(只有4–10KB左右)