前端本地缓存

时间:2022-10-13 07:17:08

WebStorage

WebStorage的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用Cookie的问题,把数据保存在本地。

Storage类型用于保存键/值对数据,与其他对象一样,增加了以下方法:

  • clear():删除所有值;
  • getItem():取得给定name的值;
  • key(index):取得给定数值位置的值;
  • removeItem():删除给定name的数据;
  • setItem():设置给定的name值

本地存储的方式有哪些?

前端本地缓存的方法主要有以下四种:

  • cookie
  • sessionStorage
  • localStorage
  • indexedDB

区别及应用场景?

关于cookiesessionStoragelocalStorage三者的区别主要如下:

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

应用场景

在了解了上述的前端的缓存方式后,我们可以看看针对不对场景的使用选择:

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