浏览器存储机制

文章目录

localStorage 的基本使用
sessionStorage,localStorage,cookie 区别
cookie 机制
1. 第一方 cookie 和第三方 cookie 的区别
2. 需注意的 cookie 的安全性
session 机制
存储内容
存储的大小
sessionStorage
localStorage
Service Worker
浏览器缓存读取规则

HTML5 中 Web Storage 的出现，主要是为了弥补使用 Cookie 作为本地存储的不足。Cookie 存储的数据量非常小，而且数据会自动携带到请求头里，但服务器端可能并不关心这些数据，所以会造成带宽的浪费。

web storage 提供了两个存储对象：localStorage 和 sessionStorage。

localStorage 的基本使用

有两点需要注意一下。在 setItem 时，可能会达到大小限制，最好加上错误捕捉：

try {
  localStorage.setItem(key, value);
} catch(e) {
  if (isQuotaExceeded(e)) {
    // Storage full, maybe notify user or do some clean-up
  }
}

function isQuotaExceeded(e) {
  var quotaExceeded = false;
  if (e) {
    if (e.code) {
      switch (e.code) {
        case 22:
          quotaExceeded = true;
          break;
        case 1014:
          // Firefox
          if (e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
            quotaExceeded = true;
          }
          break;
      }
    } else if (e.number === -2147024882) {
      // Internet Explorer 8
      quotaExceeded = true;
    }
  }
  return quotaExceeded;

另外在存储容量快满时，会造成 getItem 性能急剧下降

区别如下：

都会在浏览器端保存，有大小限制，同源限制。
cookie 会在请求时发送到服务器，作为会话标识，服务器可修改 cookie；web storage 不会发送到服务器，cookie 有 path 概念，子路径可以访问父路径 cookie，父路径不能访问子路径 cookie。
localStorage 的修改会促发其他文档窗口的update事件，localStorage 可以永久存储，而且同源下数据多窗口可以共享。
cookie 有 secure 属性要求 HTTPS 传输。
共享:sessionStorage 不能共享，localStorage 在同源文档之间共享，cookie 在同源且符合 path 规则的文档之间共享
浏览器不能保存超过 300 个 cookie，单个服务器不能超过 20 个，每个 cookie 不能超过 4k。web storage 大小支持能达到 5M。
sessionStorage 存储的数据仅在本次会话有用，会话结束之后会自动失效，而且数据仅在当前窗口有效，同一源下新窗口也访问不到其他窗口基于 sessionStorage 存储的数据。也是由这些特性导致 sessionStorage 的使用场景较少。
有效期：cookie 在设置的有效期内有效，默认为浏览器关闭；sessionStorage 在窗口关闭前有效，localStorage 长期有效，直到用户删除

cookie 和 session 都是用来跟踪浏览器用户身份的会话方式。

cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下
如果不在浏览器中设置过期时间，cookie 会被保存在内存中，生命周期随浏览器的关闭而结束，这种 cookie 称为会话 cookie，如果设置了 cookie 过期时间会保存在硬盘中，关闭浏览器之后，cookie 数据仍然存在，直到过期时间结束才消失。
cookie 是服务器发给客户端的特殊信息，cookie 是以文本的方式保存在客户端，每次请求时会带上它。

第一方 cookie 是由地址栏中列出的网站域设置的 Cookie，而第三方 cookie 来自于在网页上嵌入广告或图片等项的其他域来源。

访问 www.a.com 这个网址，这个网站设置了一个 Cookie，这个 cookie 也只能被 www.a.com 这个域下面的网页读取，这就是第一方 cookie。

如果访问 www.a.com 这个网站，这个网站有用到 www.b.com 的图片，浏览器在 www.b.com 请求图片的时候，www.b.com 设置了一个 cookie，那这个 cookie 只能被 www.b.com 这个域访问，反而不能被 www.a.com 的域访问，这个就是第三方 cookie。

value：用于保存用户登录态，应该将该值加密，不能使用明文的用户标识
http-only：不能通过 JS 访问 Cookie，减少 XSS 攻击
secure：只能在协议为 https 的请求中携带
same-site：规定浏览器不能在跨域请求携带 cookie，减少 CSRF 攻击

session 机制

当服务器收到请求需要创建 seesion 对象时，首先会检查客户端请求是否包含 sessionId。如果有 seesionId,服务器将根据该 id 返回对象的 session 对象，如果没有 sessionid,服务器将会创建新的 session 对象，并把 sessionid 再本次响应中返回给客户端。通常使用 cookie 方式存储 sessionid 到客户端，再交互中浏览器按照规则将 sessionid 发给服务端。如果用户禁用 cookie，则要使用 URL 重写，可以通过 response.encodeURL(url)进行实现；API 对 encodeURL 的结束为，当浏览器支持 Cookie 时，url 不做任何处理；当浏览器不支持 Cookie 时，url 不做任何处理；当浏览器不支持 Cookie 的时候，将会重写 URL 将 seesionid 拼接到访问地址之后。

存储内容

cookie 只能保存字符串，以文本的方式；session 通过类型与 Hashtable 的数据结构来保存，能支持任何类型的对象（session 中可含有多个对象）。

存储的大小

cookie:单个 cookie 保存的数据不能超过 4kb;
session:大小没有限制。

sessionStorage

是一个 HTML5 新增的一个会话储存对象，用于临时保存同一个窗口（或标签页）的数据，再关闭窗口或关闭标签页之后会将删除这些数据。

在 JavaScript 中可以通过 window。sessionStorage 或 sessionStrorage

非常适合 SPA，可以方便再各业务模块进行传值

不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage

localStorage 存储的数据是永久性的。

Service Worker

Service Worker本质上充当 web 应用程序与浏览器之间的代理服务器，也可以在网络可用是作为浏览器和网络之间的代理。他们旨在是的能够创建有效的离线体验。拦截网络请求并给予网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API

浏览器缓存读取规则

可以分成 Service Worker、Memory Cache、Disk Cache 和 Push Cache，那请求的时候 from memory cache 和 from disk cache 的依据是什么，哪些数据什么时候存放在 Memory Cache 和 Disk Cache 中？

总的来说:

如果开启了 service worker 首先会从 service worker 中拿
如果新开一个以前打开过的页面的缓存会从 disk cache 中拿（前提是命中强缓存）
刷新当前页面时浏览器会根据当前运行环境内存来决定是从 memory cache 还是 disk cache 中拿

localStorage 的基本使用

sessionStorage,localStorage,cookie 区别

cookie 机制

第一方 cookie 和 第三方 cookie 的区别

需注意的 cookie 的安全性