「这是我参与11月更文挑战的第10天,活动详情查看:2021最后一次更文挑战」
webstorage
webstorage是本地存储,存储在客户端。包括
localStorage
和sessionStorage
目标
webstorage提供一种在cookie
之外存储会话数据的路径。
提供一种存储大量可以跨会话存在的数据的机制。
作用域
- 不同浏览器之间无法共享
localStorage
或sessionStorage
中的信息。 - 相同浏览器不同页面之间可以共享相同的
localStorage
(页面属于相同域名和端口) - 相同浏览器不同页面或者标签页无法共享
sessionStorage
中的信息。这里需要注意的是,页面和标签页值得是顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间可以共享sessionStorage
。
生命周期
localStorage
:生命周期是永久,也就是说只要用户不在浏览器上清除localStorage
信息,这些信息将永远存在。
sessionStorage
:仅在当前会话有效,关闭页面或者浏览器就会被清除。
存储大小
localStorage
和seaaionSrorage
的存储大小一般都是:5M。
存储位置
都保存在客户端,不与服务器进行交互通信。
存储内容类型
都只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON
对象的stringify
和parse
来处理。
获取方式
localStorage:window.localStorage;
sessionStorage:window.sessionStorage;
应用场景
localStorage
:常用于长期登录(+判断用户是否登录),适合长期保存在本地的信息
sessionStorage
:适合敏感账号一次性登录
提供的一些方法
window.localStorage.setItem('key','value')
- 存储数据:setItem('key','value') —— key是数据的名称,value是数据
- 获取数据:getItem('key') —— key是数据的名称
- 删除单个数据:removeItem('key')
- 删除所有数据:clear()
- 获取某个索引的key:key(index)
好处
- 减少网络流量:一旦数据保存到本地之后,就可以避免再次向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器之间不必要的来回传递。
- 快速显示数据:性能好,从本地读数据比通过网络从服务器上获得数据快得多,本地数据可以及时获得,再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示
- 临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。
总结
存储方式 | localStorage | sessionStorage | |
---|---|---|---|
作用域 | 不同浏览器不同页面之间无法共享 | √ | √ |
同一个浏览器不同页面之间 | 可以共享 | 不可以共享 | |
生命周期 | 永久保存,只要用户不在浏览器清除信息,则将永远存在 | 临时保存,只要关闭页面或者浏览器就会清除信息 | |
存储大小 | 5M | 5M | |
存储位置 | 客户端,不与服务器交互 | √ | √ |
存储类型 | 字符串,如果是复杂对象类型可以使用JSON.parse和 JSON.stringify进行处理 | √ | √ |
获取方式 | window.localStorage | window.sessionStorage | |
应用场景 | 适合长其登录且长其保存信息在本地 | 适合敏感账号一次性登录 |