window.localStorage浏览器存储导致的问题

---

前言

在使用window.localStorage存储变量时，在同一域名下不同系统使用时可能会出现问题，比如多个系统在进行中英文环境切换的时候，系统A的语言环境可能会影响到系统B的语言环境，导致中英文展示混乱。

---

一、开发遇到的问题

系统A在切换后英文环境后，展示英文版页面，然后我发现打开另一个系统，他的语言环境也变成了英文，可是我明明没有去点击中英文切换按钮。

二、解决过程

原始代码：
A系统赋值语言环境代码：window.localStorage.lang = lang;
B系统赋值语言环境代码：window.localStorage.lang = lang;

首先定位到中英文切换的代码，将当前环境赋值给window.localStorage.lang了。
接着了解一下window.localStorage到底是个什么东西？
官方回答：window.localStorage 的数据存储在用户的浏览器中,浏览器内部存储：
localStorage 数据以文件的形式保存在浏览器的用户配置文件目录中。浏览器会根据每个域名为 localStorage 创建一个存储空间。每个域名的数据是独立的，不同域名之间的数据互不相通。
通俗说法：在一个浏览器上，baidu.com的localStorage 存储空间存储的数据和jd.com的localStorage 存储空间存储的数据不同。F12打开控制台，点击应用---->左侧栏存储----->本地存储空间见图说话：


但是在同一域名下，localStorage 存储空间存储的数据是共用的。
这就导致了系统A如果去修改localStorage 中的值为'en'后，系统B对应的语言环境修改成了'en'。

如果想要在同一个域名下的不同系统只切换自己的语言环境，而不影响其他系统的语言环境。
则只需修改对应的变量名即可，比如系统A的语言环境变量设置为window.localStorage.aLang，系统B的语言环境变量设置为window.localStorage.bLang，这样localStorage中存储两个key：aLang、bLang，各自系统独有的变量，互不影响。