sessionStroage和localStorage应用场景

325 阅读2分钟

sessionStroage和localStorage应用场景

背景

sessionStroage和localStorage都是HTML5提供存储在客户端的存储方法,类似于客户端的数据库。通过H5提供的特性的API进行存储/删除/修改。

共性

二者都是存储在浏览器端,大小根据不同不同得客户端得特性而定,大概在5M。

区别

  1. 有效期: seesio在当前窗口关闭得时候就会删除,local就算浏览器关闭也会一直存在,持续化存储
  2. 作用域不同: session不在不同的浏览器窗口共享,即使是同一个源 不共享数据, local存储得数据在所有的同源窗口上是共享的。

应用

最近我们得业务场景是电站运维,站上工程师使用的时候切账户是直接打开新得窗口

第一次存储地址使用的localstroage,容易造成token被冲掉从而导致用户信息错乱.

改版改成session存储,可以解决站上工程师不正确登陆导致的用户信息被冲得情况,但是每次打开浏览器都需要登陆(ps: 数据并不会存储在客户端)

聊聊关于用户信息

从业以来登陆存储的方式:

  1. 与服务端同学越好存cookie,他直接穿梭在http请求中,不好的地方也是同源得策略,就像上文中所说的会出现冲号得情况。
  2. 使用localStroage得时候感觉和cookie很像,cookie存储于计算机硬盘,如果不设置过期时间会一直存在,但是设置了过期时间以后他会随着时间到期而消失。localStroage是没有办法设置过期时间。
  3. 当业务场景并不考虑进入网页自动登陆得话,这是最好的技术手段,保证每个页面都是独立的用户体系适用于spa(单页面应用)简单得应用
重塑lpl荣耀,我辈义不容辞