被遗忘的sessionStorage实现每次打开网页只执行一次的操作
前言
我们经常会遇到某种需求:网站打开执行一次,之后进入相同的页面不再执行,关闭网站下次再进又会执行。很容易就会让人想到用本地存储来做,但具体用localStorage还是sessionStorage呢,这就要看一下三者之间的区别。
localStorage和sessionStorage异同
- 相同点 :存储大小限制一般都为5MB,只保存在客户端(即浏览器)中;
- 不同点:localStorage除非被清除,否则永久保存;而sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。
我们可以在浏览器上试一试
- 随便打开一个网站,打开谷歌控制台,分别用localStorage和sessionStorage存点东西
- 然后就可以在控制台Application栏里面的localStorage和sessionStorage对应网站域名下面的找到刚才存的数据了;
- 我们刷新网页试试,会发现刷新完之后localStorage和sessionStorage存储的数据再刷新网页之后依然存在。
- 关闭当前网页再次打开,发现localStorage依然存在
而sessionStorage里面存储的数据被清掉了
所以我们就可以确定当初的需求可以用sessinoStorage来做了。
具体实现
var params = sessionStorage['params'] || '';
if(params==''){
sessionStorage['params'] = '1';
//这里执行需要执行的操作
}
搞定收工!