WebStorage 和 Cookie的区别

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非常方便。