离线存储技术

• cookie
  • session
  • Cookie、sessionStorage、localStorage的区别
• Web Storage
  • localstorage
  • sessionStorage
• indexDB
• 离线缓存（Application Cache）
• WebSQL

cookie

什么是cookie，有什么用

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上（这意味着是会被保存在本地的）。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

Cookie 主要用于以下三个方面：

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）
• 浏览器行为跟踪（如跟踪分析用户行为等）、

Cookie 曾一度用于客户端数据的存储，因当时并没有其它合适的存储办法而作为唯一的存储手段，但现在随着现代浏览器开始支持各种各样的存储方式，Cookie 渐渐被淘汰。

由于服务器指定 Cookie 后，浏览器的每次请求都会携带 Cookie 数据，会带来额外的性能开销（尤其是在移动环境下）。新的浏览器 API 已经允许开发者直接将数据存储到本地，如使用 Web storage API （本地存储和会话存储）或 IndexedDB 。

参数	描述
Name	cookie的名称，一旦创建，不可更改
Value	cookie的值，若值为Unicode字符，需要为字符编码。若值为二进制数据，需要使用BASE64编码
Domain	可以访问cookie的域名。如设置为。liu.com，以liu.com结尾的域名都可以访问这个cookie
Path	cookie的使用路径，设置为/，则本禹铭下所有页面都可以访问这个cookie.
Expires/Max-Age	有效时间
Size	cookie的大小
HttpOnly	若此属性为true,则只会在HTTP头中有这个Cookie的信息，不能通过document.cookie来访问它
Secure	指定cookie是否仅被使用安全协议传输，默认为false
SameSite	用来限制第三方cookie,减少安全风险(防止CSRF攻击)

创建cookie

当服务器收到 HTTP 请求时，服务器可以在响应头里面添加一个 Set-Cookie 选项。浏览器收到响应后通常会保存下 Cookie，之后对该服务器每一次请求中都通过 Cookie 请求头部将 Cookie 信息发送给服务器。另外，Cookie 的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

cookie和token都存放在header中为什么token不会被劫持

1. xss攻击拿到cookie就可以伪造，相对而言，因为token的存放位置不确定，而且通过jwt+ip的方式验证，即使劫持也无效,但现在cookie可以设置httpOnly防止js写入，也许会刚安全，拿到也没用
2. csrf攻击成功后，利用浏览器自动携带cookie的特性，但token不会自动携带

session

• session 是保存在服务端的

• session 的运行依赖 sessionId，而 sessionId 又保存在 cookie 中，所以如果禁用的 cookie，session 也是不能用的，不过硬要用也可以，可以把 sessionId 保存在 URL 中

• session 一般用来跟踪用户的状态 session 的安全性更高，保存在服务端，不过一般为使服务端性能更加，会考虑部分 信息保存在 cookie 中

• 浏览器如何对离线资源进行管理和加载的？

• 在线：浏览器发现html头部有manifest属性，它会请求该文件，如果是第一次访问，就会根据其内容下载资源进行离线存储；如果访问过，则会比较新旧manifest，更新离线资源
• 离线：浏览器直接使用离线存储的资源

Cookie、sessionStorage、localStorage的区别

cookie与domain和path关联，而storage只与domain关联

Web Storage

localstorage

生命周期：关闭浏览器后数据依然保留，除非手动清除，否则一直在

作用域：相同浏览器的不同标签在同源情况下可以共享 localStorage

sessionStorage

生命周期：关闭浏览器或者标签后即失效

作用域：只在当前标签可用，当前标签的 iframe 中且同源可以共享

indexDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））, 像是一款NoSQL数据库

• 键值对存储
• 异步
• 事务
• 同源限制
• 储存空间大
• 支持二进制存储，ArrayBuffer和Blob

dexie.js

离线缓存（Application Cache）

HTML5 引入离线缓存（Application Cache），这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问

通过创建cache manifest文件（.appcache），可以轻松的创建离线应用

已废弃，推荐 Service Worker

WebSQL

接近废弃，不是h5规范的一部分