相关问题：

• JavaScript 中的本地存储的方式有哪些？
• 应用场景？

主要的方式

JavaScript 的本地存储（缓存）的方式有四种：

• Cookie 。
• sessionStorage
• localStorage
• indexedDB

区别

• 存储大小上：
  • cookie 数据大小不能超过 4k；
  • sessionStorage 和 localStorage 虽然有存储大小的限制，但是比 cookie 大得多，可以达到 5M 或者更大。
• 有效时间：
  • localStorage 存储持久数据，浏览器关闭后数据不丢失，除非主动删除数据；
  • sessionStorage 的数据在当前浏览器窗口关闭后就会自动删除；
  • cookie 在设置的 cookie 过期时间之前一直有效，除非窗口或者浏览器关闭；
• 数据与服务器交互方式： cookie 的数据会自动传递到服务器，服务器端也可以写 cookie 到客户端； sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

应用场景

针对不同的应用场景：

• cookie ：适用于要标记用户和跟踪用户行为的情况；
• localStorage ：适合长期保存在本地的数据（令牌）；
• sessionStorage ：敏感账号一次性登录保存的数据；
• indexedDB ：存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况。

参考

• 深入浅出前端本地储存・语雀 (yuque.com) (opens new window)
• 一行代码，搞定浏览器数据库 IndexedDB・语雀 (yuque.com) (opens new window)