localStorage与sessionStorage

tech2022-07-31  137

localStorage

实际开发中,localStorage用的还是挺多的。 比如,网页中有个手风琴列表,列表中有“资源管理”、“域管理”、“设备管理”等多个入口,默认进入“资源管理”功能页面。 不同的用户关注点不同,有的可能需要进入“域管理”页面,有的则只关注“设备管理”。这时,使用localStorage保存用户上一次最后停留的功能页面对应的id,如此一来,用户下一次进入该网页时,直接显示的就是他们关注的功能页面,而不需要到手风琴列表上去切换入口。 用localStorage来记录用户习惯,可以改善用户体验。

再比如,后台表格数据的更新周期是5min,前台下发请求获取表格数据的周期肯定比5min小,比如3min,甚至更短。 如果前台一获得后台数据,就用它们去更新表格内容,很有可能降低网页性能甚至出现页面假死。对此,用localStorage记录上一次更新表格时的数据。每次更新表格数据前,都会将本次获得的后台数据与上一次更新表格时的数据做对比,只在二者有差异时,才会用这份新数据去重新填充表格。这个思想和现在React、Vue框架里的虚拟DOM差不多,不过我们那会儿是基于js原型链开发。

localStorage存储的数据可以长期保留,除非手动清除。 localStorage中的键值对是以字符串的形式存储,所以会用到JSON.stringify()|JSON.parse()。

localStorage.setItem(key,value)localStorage.getItem(key)localStorage.removeItem(key)localStorage.clear()

sessionStorage

sessionStorage,工作中我没怎么用过。 不过它和localStorage差不多,但它不像localStorage长期有效,只要页面关闭,sessionStorage中保存的数据就会被清除。

sessionStorage.setItem(key,value)sessionStorage.getItem(key)sessionStorage.removeItem(key)sessionStorage.clear()
最新回复(0)