浅谈 cookie, sessionStorage和localStorage

Author : luckyGirl

HTML5刚出来时,把HTML5的特性翻了一遍,日子一久,不用几乎都忘光了, 最近项目中跟后台在讨论数据本地存储的问题,想到了除了cookie还有这个HTML5的新特性 — Web Storage,Web Storage又分为sessionStorage和localStorage。接下来来探探这三种的区别与用法。

一. 三者的优劣势

cookie:

  • 优势:所有浏览器都支持,同源但不同目录下也可共享
  • 劣势:同源的http请求都会携带cookie,即使不需要,增加了流量;个数有限制、存储数据比较小,对于这个限制各浏览器稍有不同,一般是50个,大小在4k以内

Web Storage:

  • 优势:存储大小比起cookie大很多,一般限制是5M-10M;App可以在线或离线情况下使用;没有额外的请求头部数据;API简单易用;
  • 劣势:数据以字符串格式存储,其他类型的对象需要在存储前转义使用时再编译;复杂数据集合存储时间可能很慢;存在浏览器兼容性问题,尤其IE只有IE8+才支持。

但两者还存在着共同的安全性问题,如关键攻击载体的CSRF,XSS,Session Hijacking等,因此一些安全敏感信息还是不要放在这里。

二. cookie的用法

关于cookie的用法,Zack在《我真的不会用cookie》讲的很详细,在这就不赘述了

三.Web Storage API

Web Storage分为sessionStorage和localStorage,两者的区别在于有效期、作用域不同。

  • sessionStorage:仅在当前浏览器窗口关闭前有效,保持不长久;不会在浏览器的不同窗口中共享
  • localStorage:始终有效,窗口或浏览器也有效;在同源窗口中都共享
2种存储方法都类似,只是名字不同而已,以localStorage为例:
  • localStorage.clear(): 清空所有记录数据
  • localStorage.getItem(key):  获取值
  • localStorage.setItem(key, value):  设置值
  • localStorage.removeItem(key): 移除一个值
storage事件

当web storage中的数据被保存后,再使用以上方法进行修改、删除,都会触发storage事件。可以指定事件的回调函数,回调函数接受event对象,event对象的key属性,保存发生变化的键名,除了key属性,event对象的属性还有3个:

  • oldValue:更新前的值,如果该key为新增加的,则这个属性为null
  • newValue:更新后的值,如果该key被删除,则此属性为null
  • url:原始触发storage事件的网页地址
  • storageArea:返回触发事件的对象,如果对象是新建的,此属性为被影响的 storage 对象(The storageArea attribute must return the value it was initialised to. When the object is created, this attribute must be initialised to null. It represents the storage object that was affected.)

另外,该事件不会在导致数据改变的当前页面触发。

参考:http://www.w3.org/TR/webstorage/#the-storage-event

转载请注明出处:LoveCicy

 

 

standard
  1. lovecicy - 2015 年 10 月 16 日 5:29 下午

    赞,最后一句是不是写错了

    回复

Have your say