h5--本地存储 sessionStorage,localstorage

HTML5规范的本地存储以及几种存储方式的优缺点及适用场景

web storage 实际是HTML4cookies存储的一个改进版。然而两种机制的功能是不同的，那么我们就开始以下的学习吧　~

• 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. 只要是能序列化成字符串的内容都可以存储
   6. 浏览器支持情况：
      1. 　基本现代浏览器都支持

sessionStorage:

1. 1. 生命周期：会话期间内有效；
   2. 不同浏览窗口数据不共享；

localStorage:

1. 1. 信息存储在本地，并且数据将永久存储，除非用户删除、
   2. 不同浏览器数据共享
   3. localStorage是域内安全的，所以不同浏览器之间保存的数据是不同的

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