导语
在做一个h5需求的时候,发现了一个问题。点击测试协议跳转到协议页面,然后再跳回来发现之前选中的状态变成了初始的没有选中的状态。所以就想到了存储这个问题。一开始是用的localStorage,但是发现关了页面之后再打开,之前选中的状态还在,这明显不符合我们的需求。后经过探索发现,其实可以用sessionStorage完美的解决这个问题。所以,我决定记录一下,增加对localStorage和sessionStorage的理解。
相同点:存储客户端临时信息
不同点:
- localStorage 生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
- sessionStorage 生命周期为当前窗口或标签页, 一旦窗口或标签页被永久关闭了 ,那么所有通过sessionStorage存储的 数据也就被清空了。
sessionStorage.setItem('isChecked', isChecked);
localStorage.setItem('isChecked', isChecked);
this.check = sessionStorage.getItem('isChecked');
this.check = localStorage.getItem('isChecked');
注意:
二者的区别在于,关掉窗口sessionStorage存储就被清空了,下次再进入这个页面的话之前存的数据是没有了的; 而使用localStorage的话下次进入这个页面存储还是会在,会停留在页面关闭前的状态。
结束语:
第一次写Markdown文章,写的不好多多见谅。END!!!!!!