一看就会，超有用活字格技能：一百八十八、页面级变量存储

大家好，最近在做一个功能的时候，遇到了一个感觉比较实用的功能和大家一起分享出来


先说一说我当时的使用场景，之前我有写过一个帖子，是关于手机扫码上传的，大家若是想要了解可以看看这个帖子

PC页面如何快速上传手机问题（手机扫码上传文件）


遇到的问题是，我当时写的帖子，只考虑到一个页面只会做一次手机扫码上传文件，多次上传的情况并没有考虑，有一个客户在使用的时候，一个页面上15个地方需要用到手机扫码上传文件，因为使用的多，为了设计方便就通过组件来完成，我当时也参加了这个设计以及优化

因为当时做的扫码上传需要生成一个GUID，在上传完成之后，页面或接收到GUID，会根据GUID填到单元格上，但是页面上有15个接收的地方，我到底需要传到哪一个单元格，这就需要进行记录了，比如GUID1对应单元格1，GUID2对应单元格2。

那么问题就来了，我应该在哪里进行记录，因为是页面级别的记录，打开页面使用才会记录，关闭页面就会消失，这就是今天要讲的内容，页面级Map
1. 那么记录在数据表，或者服务端缓存中显然是不合适的，因为并不需要持久化存储，浪费服务器的资源——PASS


2. 不用后端，又是类似于缓存，就想到了前端缓存，但是查了一下前端的缓存有一个问题，那就是这个是整个应用级别，但是使用起来也会比较大，虽然生成的GUID是唯一的，一般也不会重复——PASS
TIP：这里再科普一个小知识点，前端这个缓存，若是应用是在浏览器打开，是存储到localstorage中的，localstorage有一个缺陷，那就是自己不主动去清除存储的话，会被持久化存储到客户端，也就是浏览器打开应用所在机器上，会占用硬盘存储，虽然占存储可以忽略不计，不过除非真正是应用级别的，尽量还是少用。

再说一句，这个重置客户端缓存，是可以清除掉存储到localstorage的数据的，若是可以清除，尽量使用上


3. 前面所说的，是找已经存在的功能来实现，但是已有的方法会有一些问题，那么就想到了JS，通过自己写代码来实现，活字格的每一个页面，都可以上传一个JavaScript的文件，在这个文件中定义JS变量，在页面上所有的JavaScript命令中中都是可以引用到的

看起来好像是可行的，首先文件是上传在页面上的，定义的变量也是页面级别的，关闭页面同样变量会注销，这一些都是符合要求的。
但是在真正使用的时候，发现这个并不好用，因为页面上其他地方想要使用这个变量，首先需要先使用设置变量命令定义一个变量，调用一下JavaScript命令将这个全局变量的值放在前面定义的变量上，若是想要设置回去，又需要调用JavaScript命令，使用起来并不方便。

当然虽然并不方便，但除了麻烦一些，若是没有更好的方案，是可以使用的，抱着这样的心态，我找其他人问问有没有更好的方案，他（David）给了一个


让我毅然决然的将这个方案放弃了——PASS

4. 现在就是我要讲的方案了——表格
之前也确实没有想到可以使用表格来做页面级全局变量，直接说说使用思路，
一般我们在使用表格的时候，都是会绑定数据表，并且绑定字段的，既可以做数据预览也可以做数据查看
而这个方法，就是表格的另一个使用，一个另类的Map
1) 在页面上创建一个表格，不要绑定数据源，只有两列，建议不要对这两列进行合并，直接使用原始的，并分别给两列设置好列名，可以根据需要自行变动，也可以设置成固定的（Key-Value）

2) 到这其实方法就已经呼之欲出了，那就是对表格进行操作

1. 1. 查询——在表格中查询是否存在某一个key，使用的是页面上VLOOKUP公式，当然XLOOKUP公式也是可以的
   
2. 2. 添加——使用表格操作（添加），向表格中添加（key-value）
   
3. 3. 更新——使用表格操作（更新），根据key值，对value进行更新
   
4. 4. 删除——使用表格操作（删除），根据key值，删除对应的表格数据

复制代码

具体使用，我就不截图，在demo中有，在发这个帖子之前，本来想要通过组件包装这个功能，以便更好的使用，组件并没有提供外部命令的接口，只能通过值变更来触发，使用起来并不方便，就放弃了。

到这里页面级Map变量就已经讲完了，其实页面级变量大家应该都经常使用，比如说页面上某一个隐藏的单元格放的值就是，布置过Map使用单元格并不好用，而是通过表格来实现的。