localStorage的高阶使用

开发工作中，有时我们会用到localStorage，一般情况下我们可能是直接这么用的：

// 设置键值对
localStorage.setItem('key1', 'value1');
// 取值
localStorage.getItem('key1'); // value1
// 删除键值对
localStorage.removeItem('key1');

key比较多时，复杂一点，可能我们会给key加些前后缀来区分，像这样：

// 设置键值对
localStorage.setItem('zhangsan-key1', 'value1');
// 取值
localStorage.getItem('zhangsan-key1'); // value1

如果层级再深，我们的key管理起来会很不友好，所以我们可以借助于下面这个插件来实现localStorage的合理使用
文件地址：store.js 网盘地址 提取码：1234

项目引入文件后，我们得到全局变量MyStore，同样可以直接使用：

// 像上面那样，直接键值对赋值、取值
Store.set('zhangsan-key1', 'value1');
// 取值
Store.get('zhangsan-key1'); // value1
// 删除
Store.remove('zhangsan-key1');

但，我们的主要目的，是这么使用：定义命名空间，然后各个命名空间彼此独立

// 设置命名空间
let zhangsan = Store.namespace("zhangsan");
// 每个命名空间都可以独立设值、取值
zhangsan.set('key1', 'value1');
// 取值
zhangsan.get('key1'); // value1
// 删除键值对
zhangsan.remove(key);

数据在localStorage中长这样：zhangsan.key1 = ‘value1’

并且，多层级的命名空间可以无限嵌套下去

// 设置命名空间
let zhangsan = Store.namespace("zhangsan");
let zhangsan_space1 = zhangsan.namespace("zhangsan");
// zhangsan_space1也可以独立设值、取值
zhangsan_space1.set('key1', 'value1');
// 取值
zhangsan_space1.get('key1'); // value1
// 删除键值对
zhangsan_space1.remove(key);

此时，数据在localStorage中长这样：zhangsan.zhangsan_space1.key1 = ‘value1’

这样，我们就可以很好的实现多场景下，多层级下的键维护！