h5--本地存储 sessionStorage,localstorage

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

• storage特点（sessionStorage，localStorage）：

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

      1. getItem //取记录

      2. setIten//设置记录

      3. removeItem//移除记录

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

      5. clear//清除记录

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

sessionStorage:

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

localStorage:

1. 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左右)