浏览器储存（cookie、localStorage、sessionStorage和IndexDB）

前言

前两天课堂上，老师在浏览器界面讲的正起劲的时候，忽然定了一下，而后不出声了，默默的打开调试面板，选到Application,指着storage用鼠标在上面画起了圈，而后诡异的的笑起来了，边笑边"和善可亲"的问着咱们：有谁知道storage下面的cookie、localStorage、sessionStorage和IndexDB的做用和区别吗？

而后全场静默了两分钟，老师没办法，简单的介绍了一下，说道这个得记住，大厂面试考的很是多。而后我就很懵逼的功能没记住，就只记住了“大厂考”，因而思考了两天仍是决定写一下这篇文章夯实一下本身的知识。

正片开始

前端的储存方式

存储类：

• Web存储 （Web Storage）：HTML 5 中提出的存储方式，容量有 5 M。

   localStorage
   sessionStorage

• Cookie：浏览器广泛支持的基于 HTTP 协议的存储方式，但容量只有 4 KB

• 数据库存储： IndexDB Web SQL

缓存类：

• Cache Storage: 在 Service Worker 的规范中提出，通常配合 Service Worker 进行离线缓存。
• Application Cache： 在 HTML5.1提出的缓存方式，可用来构建离线应用。

cookie的一些小秘密

Cookie基于HTTP规范，用来识别用户。 互联网早期浏览器是没有状态维护，这个就致使一个问题就是服务器不知道浏览器的状态，没法判断是不是同一个浏览器。这样用户登陆、购物车功能都没法实现，Lou Montulli在1994年引入到web中最终归入W3C规范 RFC6265中。

浏览器在本地按照必定规则存储一些文本字符串，每当浏览器像服务器发送请求时带这些字符串。服务器根据>字符串断定浏览器的状态好比：登陆、订单、皮肤。服务器就能够根据不一样的cookie识别出不一样的用户信 息。。

Cookie 的构成：

• 名称（Name）
• 值（Value）
• 域（Domain）
• 路径（Path）
• 失效时间 （Expiers/Max-Age）
• 大小（Size）
• 是否为 HTTP请求（HttpOnly）
• 安全性（Secure）

提示：域、路径、失效时间和安全性都是服务器给浏览器的指示，它们不会随着请求发送给服务器，发送给服务器的只有名称与值对。

Cookie 的限制性：

• 若是设定了 Cookie 的过时时间，那么 Cookie 会在到期时自动失效。
• 若是没有设定过时时间，那么 Cookie 就是 session 级别的，即浏览器关闭时 Cookie 自动消失。

Cookie 的优缺点：

优势：

1. 能够控制过时时间，不会永久有效，有必定的安全保障。
2. 可进行扩展，可跨域共享。
3. 经过加密与安全传输技术 （SSL） ，能够减小 Cookie 被破解的可能性。
4. 有较高的兼容性。

缺点：

1. 有必定的数量与长度限制，每一个 Cookie 长度不能超过 4 KB ，不然超出部分会被截掉。
2. 请求头上的数据容易被拦截攻击。

cookie是如何产生的：

1. 在浏览器访问服务器时由服务器返回一个Set-Cookie响应头，当浏览器解析这个响应头时设置cookie

2. 经过浏览器js脚本设置document.cookie = 'name=monsterooo';

浏览器访问服务器携带cookie过程

建立cookie

/**

* 'name', cookie命名

* 'value'，cookie的值

* {

* 　　expires: 7, // cookie有效期，单位天；默认值：会话cookie，关闭浏览器cookie失效。

* 　　path: '/', // cookie影响到的路径；值为'/'，表示设置cookie在整个域中可用；默认值：建立cookie的页面路径。

* 　　domain: 'example.com', // 定义cookie有效的域。默认值：建立cookie的页面域。

* 　　secure: false, // 定义cookie安全性，默认值：false，设置为true，则cookie在http中是无效的，cookie的传输须要使用安全协议（https）。

* }

*/

$.cookie('name', 'value', { expires: 7, path: '/', domain: 'example.com', secure: false});
复制代码

读取cookie

$.cookie('name'); //name存在返回对应value,不存在返回null
复制代码

删除cookie

//成功删除cookie时返回true，不然返回false

$.removeCookie('name'); // => true

$.removeCookie('nothing'); // => false


注意：删除cookie时，必须传递用于设置cookie的彻底相同的路径，域和安全选项，除非您依赖于默认选项。

即：设置cookie时若是设置了path属性或secure属性，删除的时候要带着这些属性，不然没法成功删除cookie。

// This won't work!

$.removeCookie('name'); // => false

// This will work!

$.removeCookie('name', { path: '/' }); // => true

复制代码

Web Storage（localStorage和sessionStorage）

出现缘由：

• 克服 Cookie 的一些限制，同时存储一些须要严格控制在客户端，不须要发送给服务器的一些数据。
• 提供了除 Cookie 以外的另外一种存储会话的途径。
• 提供了一种大容量存储空间来跨回话存储数据的途径。

它们都是直接做为 window对象的属性存在的，咱们能够直接经过 window.localStorage 与 window.sessionStorage 来访问。

注： Web Storage 只能储存字符串，若是用 Web Storage 存储对象，会出现 [Object Object], 能够用 JSON.stringify 与 JSON.parse方法来解决这个问题。

Web Storage 实例方法:

• clear：删除全部值
• getItem(name): 根据传入的键来获取对应的值。
• key(index): 得到所对应索引的键，名称。
• removeItem(name): 删除键对应的键值对
• setItem(name, value): 为指定的 name 设置一个对应的值。

sessionStorage:

• 同源策略： 不一样于 Cookie， sessionStorage 访问限制更高，只有当前设定了 sessionStorage 的域下才能访问。
• 单标签页： 两个相同域下的标签页不能互通。
• 在关闭标签页或者新开的标签页下都不能访问以前写下的 sessionStorage, 刷新标签页依然能够访问 sessionStorage。

使用场景：

1. 主要针对会话级的小数据的存储。
2. 存储一些在当前页面刷新仍然须要存储，可是关闭后不须要留下的信息。
3. 很适合单页应用的使用，能够用来存储登陆态信息等。

localStorage：

• 同源策略：和 sessionStorage 同样，要访问同一个 localStorage 页面必须来自同一个域名，同种协议，同种端口。
• localStorage 设定后，刷新或者从新打开标签页，关闭浏览器从新打开原来的标签页也能够访问到。

使用的场景：

1. 持久性的保存客户端数据，只能经过 JavaScript 删除或者用户清除浏览器缓存。
2. 若是有一些稍大量的数据，例如编辑器的自动保存等。
3. 多页面间访问共同数据。 sessionStorage 只能用于一个标签页，而localStorage能够在多个标签页之间共享。

sessionStorage 与 localStorage 的区别:

• 生命周期：localStorage 是本地存储，没有期限，只能用户本身操做来删除。 sessionStroage 是会话存储，页面关闭数据就会丢失。
• sessionStorage 有单标签页的限制，localStorage则没有。

Storage 事件：

咱们对 Storage 对象进行任何的操做，都会在文档上触发 Storage 事件， 这个事件的 event 对象有如下属性：

• domain：发生变化的存储空间的域名。
• key：设置或删除的键名
• newValue： 若是是设置值，则是新值。若是是删除键，则为null。
• oldValue：键被更改以前的值。

IndexDB 与 Web SQL

特色：

• 访问：indexDB 和 Web SQL 和 Web Storage 同样，均是只能在建立数据库的域名下才能访问。
• 存储时间：存储时间为永久，除非用户清除数据，他可用做长期的存储。
• 大小限制：两者其实没有强制限制。只是 indexDB 在数据超过 50 M 以后会从浏览器弹出一个框让你确认。
• 性能： indexDB 查询速度会相对较慢，而 Web SQL 的性能相对较快。

IndexDB 特色：

• 它的数据保存在对象存储空间中。
• 建立对象存储空间，首先先定义一个键，以后添加数据。
• 可使用游标查询。

Cache Storage和Application Cache

Cache Storage：

Cache Storage 是用来存储 Response 对象 ，也就是对 HTTP 响应进行缓存。 Cache Storage 是多个 cache 的集合，每一个 cache 能够存储多个响应对象。它基于 Promise。

Application Cache：

它是 HTML5 中新引入的应用程序换粗技术，它的出现意味着 web 应用能够经过缓存，在没有网络的环境下运行，构建离线应用。

优势:

• 离线浏览
• 提高页面的载入速度
• 下降服务器的压力

转载：blog.csdn.net/weixin_4401…