JS 获取Application中Local Strorage域的值

Myth丶恋晨 2022-05-18 05:58 179阅读 0赞

# JS 获取Application中Local Strorage域的值 #

> 在浏览器（chrome为例）里按下F12打开控制台，会看见有一个菜单栏名为`Application`，挂在下面的二级菜单有个`Local Strorage`，可以理解成一个本地存储空间，将有些东西存储起来，解决了cookie存储空间不足的问题，这个在不同的浏览器中localStorage会有所不同。

## 阐述 ##

今天要说的，是在项目中遇到的一个使用过程，记录下来；是这样的，有一个公司自己的平台，理解成是一个大容器，这个容器是一个页面，里面包含了通用的CSS样式和插件等，每个开发人员开发完自己的一个模块页面后，需要接入这个平台，接入的方式就是通过JSON文件配置，将自己模块的HTML页面路径和JS路径写好，平台读取这个JSON配置文件，会将IP和提供的HTML页面和JS通过拼接的方式，接入到平台中，看个例子  
![这里写图片描述][70]  
会类似这样的请求方式，拼接起来，用户通过这个平台，看似是一个完整的项目，其实这个只是一个容器，页面的内容都是外部接入提供的。

但有一个情况，被接入的时候，这个大容器会给每个模块配置一个moduleId，而我的模块有个功能点，因为是通用的，这个通用指的是每个模块都可以控制菜单把我的模块接入，这个时候我需要做区分，当被这个模块接入的时候，变成这个模块的子级，就只能顺从磨合，另一个同理，但我只有一个页面，要做到两边数据不同，只能表里新增一个moduleId字段来做区分，而这个moduleId被大容器存储到了`Local Strorage`域中，等于说每次访问我的模块页面表单时，我要从域中获取这个id。

## 实现 ##

被大容器接入成为子级，大容器后台有个对象专门来存放每个模块的信息，也有生成的信息放入`Local Strorage`域中，也正是因为被接入，公用同一个域，所以我可以拿的到，以下是大容器的域  
![这里写图片描述][70 1]  
涉及公司隐私，value就不展示了，每个key对应的value是一个JSON对象，那我在每次大容器点击我的模块向我做请求HTML页面和JS的时候，在JS中取出带有我要的信息的这个`KEY`值

//从域中获取模块信息
            var moduleList = eval(localStorage["ngStorage-currentMenu"]);

由于从域中取出是个字符串，通过函数`eval()`转换成数组，通过循环取出

## 结语 ##

取出域的方法很简单，但前提是要公用一个域才能取的到，所以写这篇文章记录下来，以后有相同需求可以备着，想尝试的同行，可以随便打开一个页面，按下F12，找到其他页面的域KEY，在`console`里，输入`localStorage["key"]`的方式获取，前提是这个网址的域是开放的，举个例子，拿CSDN编辑页面来尝试  
![这里写图片描述][70 2]

就用`Hm_lvt_6bcd52f51e9b3dce32bec4a3997715ac`这个KEY取出他的value  
![这里写图片描述][70 3]

成功取值。

[70]: /images/20220518/87ca96a94e5844769103e6ffc58be0bc.png
[70 1]: /images/20220518/868b8d308fd24910b0b20f4e141600c9.png
[70 2]: /images/20220518/0cb29dce650a45e9894907a72eb52f53.png
[70 3]: /images/20220518/42a2cad618ee49d3ad9369a720125feb.png