FunEnn

Appearance

目的 ​

Cookie诞生之初的作用就是解决HTTP的无状态请求，用来记录一些用户相关的一些状态。

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

Cookie 本质上就是浏览器里面存储的一个很小的文本文件，内部以键值对的方式来存储(在chrome开发者面板的Application这一栏可以看到)。向同一个域名下发送请求，都会携带相同的 Cookie，服务器拿到 Cookie 进行解析，便能拿到客户端的状态。

缺点 ​

h5之前，存储主要用cookies，缺点：

  • 容量缺陷。大小限制4k。
  • 性能缺陷。请求头上带着数据，导致流量增加。Cookie 紧跟域名，不管域名下面的某一个地址需不需要这个 Cookie ，请求都会携带上完整的 Cookie，这样随着请求数的增多，其实会造成巨大的性能浪费的，因为请求携带了很多不必要的内容。
  • 安全缺陷。由于 Cookie 以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，然后进行一系列的篡改，在 Cookie 的有效期内重新发送给服务器，这是相当危险的。另外，在HttpOnly为 false 的情况下，Cookie 信息能直接通过 JS 脚本来读取。
  • 操作缺陷。Cookie的原生api不友好，需要自行封装

webStorage ​

HTML5 提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage，挂载在 window 对象下。 webStorage 是本地存储，数据不是由服务器请求传递的。从而它可以存储大量的数据，而不影响网站的性能

localStorage ​

以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。IE8+支持，每个域名限制5M 打开同域的新页面也能访问得到。可以存储数组、数字、对象等可以被序列化为字符串的内容

js
window.localStorage.username = 'hehe'                   // 设置
window.localStorage.setItem('username', 'hehe')         // 设置
window.localStorage.getItem('username')                 // 读取
window.localStorage.removeItem('username')              // 删除
window.localStorage.key(1)                              // 读取索引为1的值
window.localStorage.clear()

sessionStorage ​

sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用 sessionStorage 就比较方便。 注意，刷新页面 sessionStorage 不会清除，但是打开同域新页面访问不到。

js
window.sessionStorage.username = 'hehe'                   // 设置
window.sessionStorage.setItem('username', 'hehe')         // 设置
window.sessionStorage.getItem('username')                 // 读取
window.sessionStorage.removeItem('username')              // 删除
window.sessionStorage.key(1)                              // 读取索引为1的值
window.sessionStorage.clear()
cookielocalStoragesessionStorageIndexedDBWeb SQL
规范HTTP规范HTML5规范HTML5规范HTML5规范已被W3C规范废弃，但浏览器广泛支持
挂载对象DOMBOMBOMBOMBOM
传输cookie数据始终在同源的http请求中携带（即使不需要）仅在本地保存，不会传输仅在本地保存，不会传输仅在本地保存，不会传输仅在本地保存，不会传输
存储大小4k5M左右，各浏览器的存储空间有差异5M左右，各浏览器的存储空间有差异
有效期在设置的cookie过期时间之前一直有效始终有效，窗口或浏览器关闭也一直保存仅在当前浏览器窗口关闭前有效始终有效，窗口或浏览器关闭也一直保存始终有效，窗口或浏览器关闭也一直保存
作用域所有同源窗口中都是共享的所有同源窗口中都是共享的不在不同的浏览器页面中共享，即使是同一个页面所有同源窗口中都是共享的所有同源窗口中都是共享的
易用性原生接口不友好，需要自己封装Web Storage 提供api 接口，易用Web Storage 提供api 接口，易用提供了api 接口，易用提供了api 接口，易用