HTML5系列（01）WebStorage是什么以及 和 Cookie的区别

版权声明：本文为吴孔云博客原创文章，转载请注明出处并带上链接 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，该方法会抛出QuotaExceedeErrorDOMException异常，不改变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

storage事件解析

--------------------- 本文来自 KongyunWu 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/wkyseo/article/details/51452303?utm_source=copy