WebStorage 和 Cookie的区别
版权声明：本文为吴孔云博客原创文章，转载请注明出处并带上链接，谢谢。 https://cloud.tencent.com/developer/article/1347618
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
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：
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事件,这看起来似乎更让人想的通些.
参考：