个人博客

Appearance

浏览器缓存 ​

Cookies ​

cookie 是用于解决 HTTP 无状态的问题的

涉及的请求头与响应头

  • Set-Cookie:name=value

限制

  1. 同源策略

如 在http://www.baidu.com 与https:www.baidu.com下的 cookie 不通用。 在 http://www.baidu.com/personal 与 http://www.baidu.com/public 也不通用

  1. 每一个域的 cookie 的总数和空间有限制

如 IE6 每一个域最多 20 个 cookie 如大多数浏览器空间为 4M

  1. 时效问题(expires)

SessionStorage ​

sessionStorage 是 html5 提出的一个新的客户端存储方案，它区别于 Cookie 存储的是

  1. 数据存储在客户端，不会随着 HTTP 传输给服务器
  2. Cookie 单个限制 4k，而 SessionStorage 每一个域名最大存储量为 5M(各浏览器不一样)
  3. 只有相同的域名才能互相读取 SessionStorage 的内容(没有同源那么严格)
  4. SessionStorage 随着页面的关闭会失效

方法

  • sessionStorage.getItem('name'); // 获取指定 key 所存储的 value 值
  • sessionStorage.setItem('name'); // 将 value 存储到 key 指定的字段
  • sessionStorage.removeItem('name');
  • sessionStorage.key(index); // 返回列表中对应索引的 key 值
  • sessionStorage.length //返回 key/value 队列的长度
  • sessionStorage.clear();

注意

设置，获取 key/value 的方法除了使用 setItem()和 getItem()方法以外，还分别提供了一个简单的方法：设置方法：sessionStorage.someKey = 'someValue'

获取方法：sessionStorage.someKey;

LocalStorage ​

1、2、3、4 跟 SessionStorage 相同

  1. 不会随着页面的关闭失效，除非手动清理缓存

IndexedDB ​

这是 HTML5 提供的一个更大容量的本地存储方法，并且提供自定义索引的方式，其就像一个在浏览器下的同源存储的本地数据库(非关系型数据库)。

特点

  1. 键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

  2. 异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

  3. 支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

  4. 同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

  5. 储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

  6. 支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

问题 ​

  1. 如何确认当前客户端对应那一条 SESSION 数据？

其还是借助于 Cookies，但是存放的不是 session 的数据，而是当然 SESSION 产生的一个 ID,那么其传输时只需要一个 SESSION_ID 来确认是那条 SESSION 数据。其通常存放在 cookie 中。

Cookie: SESSION=6607e4fb-2449-498c-8472-b4470c9812a0
  1. cookie 和 session 有哪些方面的区别
  • cookie 存放在客户端， session 存放在服务器端。
  • cookie 是不安全的，其存放在客户端容易被串改。
  • session 存放在服务器，但是一般需要借助 cookie 保存其唯一 ID
  • cookie 单个限制 4k，条数一般 20 条。 而 session 存放在服务器端可借助于 redis。不会限制你的条数。
  1. sessionStorage 是在会话关闭就失效，那么我们在同一个浏览器中多个相同域名的页面，其 sessionStorage 是共享的么？

答案： 刷新当前页面，或者通过 location.href、window.open、或者通过带 target="_blank"的 a 标签打开新标签，之前的 sessionStorage 还在，但是如果你是主动打开一个新窗口或者新标签，对不起，打开 F12 你会发现，sessionStorage 空空如也。

那么还有一个问题： 如果我们通过 location.href 打开的新页面其之前的 sessionStorage 还在，那么我在新的页面修改 sessionStorage 的内容、原来的页面内容也会修改么？

答案： 不会修改。

所以最终答案是： 刷新当前页面，或者通过 location.href、window.open、或者通过带 target="_blank"的 a 标签打开新标签，浏览器会复制一份当前页面的 sessionStorage 到新的页签(如同对象的深拷贝一样，两个对象的地址引用不相同了，所以互相不会影响)，

  1. localStorage 页签互享

  2. 跨域的页面如何实现数据共享？

我们经常有一个页面 a.html 包含另外一个页面 b.html。那么这时候如何实现跨域数据共享？ 这就借助于 HTML5 的一个新的方法 postMessage(),这个可以解决

1.页面和其打开的新窗口的数据传递

2.多窗口之间消息传递

3.页面与嵌套的 iframe 消息传递

三个问题的数据共享问题。 postMessage(data,origin)方法接受两个参数： data: 要传递的数据,部分浏览器只支持字符串，所以需要借助 JSON.stringif()转换。 origin: 目标地址，协议+主机+端口号[+URL]，URL 会被忽略，所以可以不写，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

  1. 如何设计一个 localStorage，保证数据的实效性

在存储数据的时候其值为一个对象 value 的值。同时保存一个 expires 字段为其失效时间。提供一个公共获取方法。在获取指定值时，先判断其是否存在，然后判断时效，在有效期内才返回数据。

  1. localStorage 和 cookie 有什么区别

其都是客户端存储方式。 其区别是：

  • cookie 会在请求时通过 cookie、set-cookie 字段 于客户端与服务器之间来回传递。
  • cookie 只在设置 cookie 的有效期内一直有效，不管浏览器窗口的关闭。而 localstorage 始终有效，长期保存。
  • 存储大小不同。 cookie 单个数据不能超过 4k。 localstorage 可以达到 5M 甚至更大。
  • 作用域不同。
    • sessionStorage 不在不同的浏览器窗口中共享。
    • localStorage 在所有的同源窗口中都是共享的。
    • cookie 在所有的同源窗口中是共享的。
  1. cookie 的引用为了解决什么问题

为了解决 http 是无状态的问题，提供客户端与浏览器间用户的登录信息的保存。

  1. 介绍 localstorage 的 API

  2. sessionStorage 、localStorage 和 cookie 之间的区别

共同点

  • 都是保存在浏览器端，且同源的。

区别

  • cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

  • cookie 数据还有路径（path）的概念,可以限制 cookie 只属于某个路径下。

  • 存储大小限制也不同，cookie 数据不能超过 4k，同时因为每次 http 请求都会携带 cookie，所以 cookie 只适合保存很小的数据，如会话标识。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

  • 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中都是共享的。

Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

  1. cookie 和 token 都存放在 header 里面，为什么只劫持前者

  2. 介绍 service worker