浏览器储存(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…

回复

我来回复
  • 暂无回复内容