BUZ-缓存/状态管理

key String 缓存名称

notSave Boolean 是否不立即保存，默认false，详见save方法

1	App.storage.remove("userInfo");

save

将所有临时更改的缓存数据保存到SessionStorage会话缓存中，请根据自身需要决定是否存储会话缓存

1	App.storage.save();

clear

清除当前数据仓库中所有缓存数据慎用

1	App.storage.clear();

storageHelper

BUZ默认提供一个helper，刚才我们看到了addWathcer例子，他是通过计算属性来实现JS相应Node节点的， 我们可以直接使用helper使用更少的代码实现刚才的例子。

依然在addWatcher例子中的A脚本基础上，我们不需要通过在B.js中设置计算属性，我们修改HTML

1	{{storage('userInfo.age')}}

使用storageHelper可以直接从App.storage中读取缓存数据，若数据是响应式的它会自动监听变更广播。

对helper有兴趣的童鞋可以参考自定义指令/渲染

此方需要传入缓存的地址，你不需要担心缓存不存在而导致报错，内部通过层级读取，若上一层读取失败或 undefined则不会向下寻址，直接返回空。

高级用法

在管理一个前端项目时，你有没有为不同开发人员总是忘记移除缓存造成的内存泄漏而感到头疼呢？ 你有没有因为不同开发人员设置缓存时名称过于随意而造成的缓存覆盖呢？接下来看下面的这个高级扩展。

设计方法：由于BUZ在项目中已经为你确定DDD设计理念，我们可以实现区域内的缓存独立使用，当跳出当前区域时 自动清除原区域所产生的所有缓存（除全局外），怎么做呢？

Storage在存储时会同时存放两份数据，一份是完整信息数据，一份是纯值数据，由于对象是引用关系，内存消耗而乎其微， 请继续往下看。

我们对外操作的都是Storage.data，因为它就是我们真正的仓库数据，方便使用；在Storage中还存在一个 _data变量，它除了存放了数据还存放了很多其它配置信息。

1 2 3 4 5 6 7

let item = {     value: value,     param: param,     fragment: this.app.router.fragment }   this._data[key] = item;

从上面源码可以看出，this._data[key]不是原缓存值，内部包含了value(缓存值)、param(自定义配置信息)、fragment(地址碎片，详见router)

在add方法中参数param就是上面代码的param，因此我们可以根据不同项目自定义缓存标识。

实践

自定义forever标识

在param中自定义forever Boolean，代表是否是永久缓存。

1 2 3

App.storage.add("userInfo",{...},{     forever:true });

通过上面例子我们就给userInfo做了一个自定义属性。

监听Router跳转

建议先阅读Router 路由管理章节。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

App.router.on("before",function(data){     //新的地址碎片     let newFragment = data.newFragment;       //原地址碎片     let oldFragment = data.oldFragment;       //若存在原地址碎片并且区域名称不同时     if(oldFragment         && oldFragment.params.area!==newFragment.params.area){                      let removeNames=[];               for(let name  in App.storage._data){                 let item =App.storage._data[name];                   //若当前缓存是原区域产生的，并且不是永久缓存                 if(item.fragment                     && !item.param.forever                     && item.fragment.params.area ===oldFragment.params.area){                         removeNames.push(name);                     }             }               removeNames.forEach((name)=>{                 //移除缓存，并不保存                 App.storage.remove(name,true);             });               //统一保存更改             App.storage.save();     } });

通过上面例子即可实现跳出区域时清除原区域的所有非全局缓存数据。

https://github.com/ZhangChuanHui/BUZ