浏览器本地存储

本地存储-本地缓存 存储-储存 前端 4

梗概

• 一个域名对应一组本地本地存储 ^2h68o7
  • 在某个域名下的js代码只能访问到其所在域名的本地存储

主要有以下四种方法

• child::cookie
• child::sessionStorage
• child::localStorage
• child::indexedDB

区别

关于cookie、sessionStorage、localStorage三者的区别主要如下：

1. 差异:

1.1. 存储大小

• child::

  cookie#^aae782

• sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

1.2. 有效时间

• localStorage:

  • 持久存储在硬盘中

  指向原始笔记的链接

• sessionStorage:

  session#^2784da

• cookie:

  cookie#^ef1759

1.3. 数据与服务器之间的交互方式

• cookie:

  cookie#^20ac6e

• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

作用域不同

• session:

  • 即使同源, 不同tab的sessionStorage不共享

  指向原始笔记的链接

• cookie与localstorage:

  • 在某个域名下的js代码只能访问到其所在域名的本地存储

  指向原始笔记的链接

  • 不同tab间共享

1.4. 应用场景

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