如何防止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的值的话，看文章开头给出的，最好是应用于一个不会被修改的静态的值。