localStorage和seaaionStorage是啥???

125 阅读3分钟

「这是我参与11月更文挑战的第10天,活动详情查看:2021最后一次更文挑战

webstorage

webstorage是本地存储,存储在客户端。包括localStoragesessionStorage

目标

webstorage提供一种在cookie之外存储会话数据的路径。 提供一种存储大量可以跨会话存在的数据的机制。

作用域
  • 不同浏览器之间无法共享localStoragesessionStorage中的信息。
  • 相同浏览器不同页面之间可以共享相同的localStorage(页面属于相同域名和端口)
  • 相同浏览器不同页面或者标签页无法共享 sessionStorage中的信息。这里需要注意的是,页面和标签页值得是顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间可以共享sessionStorage
生命周期

localStorage:生命周期是永久,也就是说只要用户不在浏览器上清除localStorage信息,这些信息将永远存在。 sessionStorage:仅在当前会话有效,关闭页面或者浏览器就会被清除。

存储大小

localStorageseaaionSrorage的存储大小一般都是:5M。

存储位置

都保存在客户端,不与服务器进行交互通信。

存储内容类型

都只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringifyparse来处理。

获取方式

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非常方便。

总结

存储方式localStoragesessionStorage
作用域不同浏览器不同页面之间无法共享
同一个浏览器不同页面之间可以共享不可以共享
生命周期永久保存,只要用户不在浏览器清除信息,则将永远存在临时保存,只要关闭页面或者浏览器就会清除信息
存储大小5M5M
存储位置客户端,不与服务器交互
存储类型字符串,如果是复杂对象类型可以使用JSON.parse和
JSON.stringify进行处理
获取方式window.localStoragewindow.sessionStorage
应用场景适合长其登录且长其保存信息在本地适合敏感账号一次性登录