JS 存储的方式

Javascript本地存储的方式有哪些？区别及应用场景？

cookie：

• 不超过4kb
• 在过期时间之前一直有效，即使会话或者浏览器关闭
• 会自动将数据传递到服务器，服务器也可以写cookie到客户端

localstorage：

• 优点：
  • 存储大小可以达到5M
  • 只要不主动删除，数据永久储存
  • 不会将数据发送给服务器，仅在本地储存
  • 存储信息在同一域中是共享的，受同源策略的限制
• 缺点：
  • 无法像 cookie一样设置过期时间
  • 只能存入字符串，无法直接 存入对象

sessionStorage：

• 存储大小可以达到5M 页面关闭
• sessionStorage将会删除数据 不会将数据发送给服务器
• 仅在本地储存
• sessionStorage也具有上述相同的属性和方法

注意：localstorage、sessionStorage存储对象或数组时，需要将其更换为JSON字符串，然后再进行存储。

indexDB（了解）：

• 优点：
  • 储存量理论上没有上限
  • 所有操作都是异步的，相比 LocalStorage 同步操作性能更高，尤其是数据量较大时
  • 原生支持储存JS的对象
  • 是个正经的数据库，意味着数据库能干的事它都能干
• 缺点：
  • 操作非常繁琐
  • 本身有一定门槛

区别：

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

应用场景：

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