WebStorage
WebStorage的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用Cookie的问题,把数据保存在本地。
Storage类型用于保存键/值对数据,与其他对象一样,增加了以下方法:
- clear():删除所有值;
- getItem():取得给定name的值;
- key(index):取得给定数值位置的值;
- removeItem():删除给定name的数据;
- setItem():设置给定的name值
本地存储的方式有哪些?
前端本地缓存的方法主要有以下四种:
- cookie
- sessionStorage
- localStorage
- indexedDB
区别及应用场景?
关于cookie
、sessionStorage
、localStorage
三者的区别主要如下:
- 存储大小:
cookie
数据大小不能超过4k
,sessionStorage
和localStorage
虽然也有存储大小的限制,但比cookie
大得多,可以达到5M或更大 - 有效时间:
localStorage
存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;sessionStorage
数据在当前浏览器窗口关闭后自动删除;cookie
设置的cookie
过期时间之前一直有效,即使窗口或浏览器关闭 - 数据与服务器之间的交互方式,
cookie
的数据会自动的传递到服务器,服务器端也可以写cookie
到客户端;sessionStorage
和localStorage
不会自动把数据发给服务器,仅在本地保存
应用场景
在了解了上述的前端的缓存方式后,我们可以看看针对不对场景的使用选择:
- 标记用户与跟踪用户行为的情况,推荐使用
cookie
- 适合长期保存在本地的数据(令牌),推荐使用
localStorage
- 敏感账号一次性登录,推荐使用
sessionStorage
- 存储大量数据的情况、在线文档(富文本编辑器)保存编辑历史的情况,推荐使用
indexedDB