版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接 https://blog.csdn.net/wkyseo/article/details/51452303
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。
https://aximario.github.io/2016/12/15/web-storage/
https://blog.csdn.net/wkyseo/article/details/51452303?utm_source=copy
cookie
cookie在浏览器和服务器间来回传递,主要应用场景:
- 保持登录
- 保持上次查看的页面
- 浏览计数
- 广告追踪
- 购物车的状态保持
Cookies是如何起效的?
当浏览器从web的回应到页面请求中接收到一个 Set-Cookie 头部时Cookies便创建了:
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: page_loaded=25; Expires=Wed, 09 Jun 2021 10:18:14 GMT
浏览器接收到表明回应成功的 HTTP 200 代码,以及回应的内容类型。同时也接收到了 Set-Cookie头部,并创建了一个的cookie:
Name | Value | Expires |
---|---|---|
page_loaded | 25 | Wed, 09 Jun 2021 10:18:14 GMT |
除非在Wed, 09 Jun 2021 10:18:14前刷新,否则cookie将在这以后无效并被浏览器移除。如果它没有被终止,在将来所有的该网站的请求中都将携带类似的信息头部:
GET /spec.html HTTP/1.1
Host: www.example.org
Cookie: page_loaded=25;
cookie一直在潜在隐私和安全影响方面有一个坏名声。他们很容易受到安全问题攻击影响,例如关键攻击载体的CSRF(Cross Site Request Forgery),XSS(Cross Site Scripting Attacks) 以及 Session Hijacking 。一个用功且专业的开发者也许不会把很多安全细节信息放在cookie中,或者实现一系列的方法来减轻可能的这些形式的攻击。
WebStorage
HTML5引入了Web Storage作为Cookies的替代,这种存储有两种类型:local 和 session:
原文链接:http://caibaojian.com/web-storage.html
localStorage
localStorage是用来做永久性
存储的。·
localStorage里的数据的时效是永久的!只要你不删,它就一直在那。除非web应用需要删除或者用户需要删掉它。
localStorage的作用域是限定在文档源级别的,
不同的文档源之间是不能读取和修改对方的数据的,而相同的文档源是可以的。但是不同的浏览器是不共享Storage的,也就是说你在Chorme浏览器里存的数据,在Firefox里是访问不到的,即使它们是同一文档源。
sessionStorage
sessionStorage是用来做临时性
存储的。
sessionStorage的时效只存在于标签页存在的时间,一旦标签被关闭了,sessionStorage存储的数据也会被删除掉。
sessionStorage的作用域同样是限定在文档源级别的,不仅如此,它还被限制在标签页中,不同标签页的同一个页面拥有各自的sessionStorage,数据不能共享。如果是一个页面里有两个<iframe>
元素,它们是共享sessionStorage的。
Web Storage API
好,简要的讲完了Web Storage的特性之后呢,接下来该讲讲怎么操作Web Storage了。
Storage对象提供了操作key/value
对(下面我们称之为item)的方法,key和value都是string类型的值(包括空字符串),如果存的不是字符串,会在存储前被转换成字符串,要小心哦!
length
length返回Storage对象内item的数量,这是一个只读属性。
下面的代码可以在Chorme控制台里给localStorage增加一个判断是否为空的方法
1 2 3 | localStorage.__proto__.isEmpty = function isEmpty() { return localStorage.length === 0; } |
key(index)
key(index)返回第n项的key。当index的值超出了length,返回null。
注意:存入Storage对象内的item的排序顺序由浏览器厂商自己决定,不一定是按照你存入的顺序排序的哦,当你增加或者删除item时,index对应的值可能会变化
下面的代码可以遍历localStorage里的所有key
1 2 3 | for (let i = 0, len = localStorage.length; i < len; i++) { console.log(localStorage.key(i)); } |
getItem(key)
返回对应key值的value,如果没有,返回null。
1 | localStorage.getItem('gameRemainingTime'); |
setItem(key, value)
setItem方法首先检查要设置的item是否存在,如果不存在,在Storage里加入该item;如果存在,更新这个item的value。如果无法存入新item,该方法会抛出QuotaExceedeError
DOMException异常,不改变Storage内的任何内容(表示Storage已经存满了,Storage目前推荐的存储容量上限为5M)
1 | localStorage.setItem('gameRemainingTime', '10'); |
removeItem(key)
removeItem方法会删除指定的item,如果不存在指定的item,什么都不做
1 | localStorage.removeItem('gameRemainingTime'); |
clear()
clear方法会清空Storage里的所有item,如果Storage本来就是空的,什么都不做
1 | localStorage.clear(); |
Web Storage 存储事件
当localStorage或者sessionStorage的数据发生变化的时候,浏览器都会在其他对该数据可见的窗口对象上触发storage
事件(本窗口除外)。
重要:只有当存储数据真正发生变化时才会触发存储事件,比如给一个item重新设置一个和原来一样的value,或者是删除一个不存在的item是不会触发存储事件的。
StorageEvent的几个属性:
- key:item的key,没有则为null
- newValue: item的新值,没有则为null
- oldValue: item的旧值,没有则为null
- storageArea: sessionStorage或者localStorage
- url: 触发存储事件的脚本所在文档的url
1 2 3 | window.addEventListener('storage', function(e) { console.log(e.key, e.oldValue, e.newValue, e.storageArea, e.url); }, false); |
Web Storage 进阶
这一章主要讲一些不那么重要,零碎的小知识点,可看可不看,有发现一些新东西会慢慢补充进来。
sessionStorage
对于存在sessionStorage里的数据,浏览器是不应该给它设置过期时间的,它有自己的生命周期。除非用户要求删掉数据,或者存储空间不足,或者处于完全原因。
现在有些浏览器有打开上次关闭的标签页的功能,所以sessionStorage的生命周期可能并不是在标签页关闭之后就立马结束,可能会延时一段时间。
localStorage
如果用户禁用了缓存,那么在我们存入数据时会抛出SecurityError
DOMException
磁盘空间
目前推荐的磁盘空间是5M,但是不同的浏览器厂商有不同的设定,这个设定会由实际检验合理性,比较合理的大小可以反馈给W3C,然后他们来修改这个推荐的大小。
当存储空间即将达到上限的时候,浏览器可以提醒用户授权增加一点存储空间,剩余的存储空间浏览器也应该能让用户知道。
IE对数据的存储是异步的,Firefox和WebKit是同步的。在数据量少的时候是看不出区别的。除非存储的数据量达到一定的量级,你会发现IE执行的会比较快,因为它跳过了写到磁盘的过程。
参考文献
- HTML Standard - Web Storage
- 《JavaScript 权威指南》
- 《JavaScript 高级程序设计》
- 《HTML5 权威指南》
原文来自:https://aximario.github.io/2016/12/15/web-storage/
Web Storage 的缺陷
-
数据以简单字符串存储;操作所需的存储不同类型的对象,例如booleans,objects,ints和floats。
-
默认5MB存储限制;如果需要时可有用户允许获取更多存储。
-
可被用户或者系统管理员禁用
-
复杂数据集合存储可能很慢
Web Storage 的长处
-
App 可以再在线或离线情况下使用
-
拥有简单好用易学的API
-
能够对浏览器使用事件钩子,例如offline,online,storage change
-
比cookies更便于管理,没有额外的的请求头部数据
-
提供更大的空间以存贮日益剧增的复杂数据
Web Storage API
Web Storage API 简单易学,它只包含四个方法:
sessionStorage、localStorage、cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的。
Web Storage带来的好处:减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。
事件storage
sessionStorage 和 localStorage具有相同的方法storage事件,在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给你的一个通知。当setItem(),removeItem()或者clear() 方法被调用,并且数据真的发生了改变时,storage事件就会被触发。注意这里的的条件是数据真的发生了变化。也就是说,如果当前的存储区域是空的,你再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值,事件也是不会触发的。当存储区域发生改变时就会被触发,这其中包含许多有用的属性:
storageArea: 表示存储类型(Session或Local)
key:发生改变项的key
oldValue: key的原值
newValue: key的新值
url*: key改变发生的URL
* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早,没有包含这一变更。为兼容性考虑,使用url属性前,你应该先检查它是否存在,如果没有url属性,则应该使用uri属性
如果调用clear()方法,那么key、oldValue和newValue都会被设置为null。
PS.在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更让人想的通些.
参考:
MDN
--------------------- 本文来自 KongyunWu 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/wkyseo/article/details/51452303?utm_source=copy