写文章

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

吐槽君 分类：javascript

c483f418306d7b9d6bbf24d495e473c3.jpg

前言

前两天课堂上，老师在浏览器界面讲的正起劲的时候，突然定了一下，然后不出声了，默默的打开调试面板，选到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

936204-20170506000744820-1234597197.png
2. 通过浏览器js脚本设置document.cookie = 'name=monsterooo';

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

936204-20170505234728679-928065167.png

创建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…

回复

我来回复

  • 暂无回复内容