如何防止localStorage和sessionStorage在开发者工具中被手动修改?

写在前面:        

        如果你使用的localStorage的值不希望被修改的话,最好是一个静态的值,也就是它放在localStorage中之后就不会被你的代码更改了。如果你是在localStorage中放置一个用于标识登录状态的变量,比如:connected == 1代表登录,connected == 0代表未登录,那么这也就意味着你的代码中肯定会修改这个connected的值,那么这个时候,connected变量就不适用这个方法,因为用了之后这个变量会一直闪烁,出现莫名其妙的问题。

        我写的项目使用到了localStorage进行判断当前用户是否已经登录,我没有用到token,我觉得这种方式也能实现,就自己想到用这种方法,如果用户没有断开登录,即使新开一个标签页,也可以保持之前的登录状态,避免用户多次登录,影响使用体验。

        如题,我想介绍的方式是防止用户从浏览器的开发者工具中(chrome是application中进行查看localStorage和sessionStorage)对local和session(下均这二者均简称为local和session)进行手动修改。

        如果你使用的是vue的话,在main.js加上这几行代码即可解决你的问题,简单粗暴!

代码如下所示:

        说明:这段代码是针对所有在local和session中的变量而言的,你也可以自己指定需要哪个变量不被更改,比如你有个变量叫language,那么你就:

                if(e.key == 'language'){    localStorage.setItem(e.key,e.oldValue)    }

// 防止localStorage被修改
window.addEventListener('storage', function(e) {
    localStorage.setItem(e.key, e.oldValue)
});
// 防止sessionStorage被修改
window.addEventListener('storage', function(e) {
    this.sessionStorage.setItem(e.key, e.oldValue)
});

具体在main.js中的整体位置,注意不要放错地方:

       原理就是:你换新值是吧,行啊,劳资用旧值来覆盖你!气死你!诶~改不了了吧~~~

         由于我在代码中也用使用:window.sessionStorage.setItem或者是window.localStorage.setItem对local和session进行修改,原本以为上面这种方式会影响代码中的这种修改值的操作,但实际上并不影响,所以我可以得出结论:这种方式就是防止用户在下面这里自己修改local和session:

 实现的效果如下的gif所示:

 喜欢的点个赞哦!我也是参考的其他人的方法,踩在巨人的肩膀上嘛哈哈哈

11月22日更新:

这种方式对于代码中修改local和session的值也有影响,也就是说,如果你代码中需要更改local和session的值的话,看文章开头给出的,最好是应用于一个不会被修改的静态的值。

猜你喜欢

转载自blog.csdn.net/qq_41083105/article/details/121176159