JavaScript本地缓存的方法主要有这四种：

  • cookie
  • sessionStorage
  • localStorage
  • indexedDB

cookie

cookie，小型文本文件，指的是网站为了辨别用户分身而储存在用户本地终端上的数据。是为了解决http无状态导致的问题。

作为一段一搬不超过4KB的小型文本数据，它由一个名称、一个值和其他几个用来控制cookie有效期、安全性和使用范围的可选属性组成。

但是cookie在每次发起请求中都会被发送，如果不使用HTTPS，并对它加密，那么保存的信息很容被窃取，导致安全风险。也就是说别人拿到cookie，就可以用你的身份来登录网站。

cookie有这几个属性：

  • Expires，设置cookie的有效时间，比如Expires=Wed, 21 Oct 2015 07:28:00 GMT
  • Max-Age用于设置在Cookie失效之前需要经过的秒数，这个属性的优先级高于Expires。比如Max-Age=604800
  • Domain指定了Cookie可以送达的主机
  • Path指定一个URL，这个URL必须出现在要请求的资源路径中才能发送Cookie。比如Path=/docs # /docs/Web/ 下的资源会携带Cookie
  • 标记为Secure的Cookie只应通过被HTTPS协议加密过的请求发送给服务器端。

如果想要修改Cookie，首先要确定domain和Path属性必须都相同才可以，如果其中一个属性不同，就会创建一个新的cookie。

Set-Cookie:name=aa; domain=aa.net; path=/ # 服务端
document.cookie =name=bb; domain=aa.net; path=/ # 客户端

localStorage

localStorage是HTML5新增的方法，它有这几个特点：

  1. 持久化的本地存储，除非主动删除数据
  2. 存储的信息在同一个域中是共享的
  3. 当本页操作了localStorage的时候，本页面不会触发storage事件，但是别的页面会触发storage事件
  4. 大小为5M，不同的浏览器厂商，localStorage的大小也不同
  5. localStorage本质上是对字符串的读取，如果存储的内容过多的话，会消耗内存空间，会导致页面变卡
  6. 受同源策略的限制

sessionStorage

sessionStorage的用法和localStorage的用法一直，唯一不同的是生命周期，一旦页面关闭，sessionStorage将会删除数据。

indexedDB

indexedDB是一种低级的API，用于客户端存储大量结构化的数据，indexedDB使用索引来实现对数据的高性能搜索。

特性：

  1. 大小没有限制
  2. 所搜的操作都是异步的，比localStorage同步造作性能更高，尤其是数据量较大的时候
  3. 原生支持存储JS对象
  4. 是正经的数据库，所以数据库能做的indexedDB基本上都能做

不足之处就是操作非常频繁、本身有一定的门槛。

这就是关于JS本地存储的知识，希望对你有所帮助！