详解Vue中localstorage和sessionstorage的使用(3)

日期：2020-05-11 栏目：程序人生 浏览：次 
/*
 * cookies.js
 * cooikes的实现，这辈子估计没有时间实现了
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}
/*
 * json.js
 * json的实现，这辈子估计也没有时间实现了
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}

2.2. 规范命名空间的使用

为了防止key值污染,我们可以合理使用命名空间

我们可以定义命名空间，但是不能把很多数据存储在同一对象里面，这样后面的操作量会太大

比如全局的在global下面

比如各功能系统的加上系统词缀

一个系统的命名空间规范应该提前设计好，否则真正开发起来会有很多人不按照规则使用

全局使用的东西要在README.md文档中体现出来

示例

* localStorage['SGQ.global.userAuthor']：登录的用户信息都在这里,菜单,组织，集团
* localStorage['SGQ.global.systemName']：登录的系统名称
* localStorage['SGQ.vuex.state']:vuex中的state的存储地址，这里面有所有的的东西
* localStorage['SGQ.wms.warehouse']:wms需要的仓库信息
+ localStorage['SGQ.wms.warehouse'].permissionId
+ localStorage['SGQ.wms.warehouse'].dataResource
* localStorage['SGQ.tms.org']:tms需要的网点的信息
+ localStorage['SGQ.tms.org'].permissionId
+ localStorage['SGQ.tms.org'].orgName

2.3. storage使用规范

2.3.1. 问题产生的原因

这个问题的产生是因为我们要做权限登录，然后登录的时候一直报存储空间不够的问题，查了原因发现是后端把所有的超管的几千条数据都返回来了，以至于不够用，后来修改了后端接口返回的数据内容解决了这个问题。

但是这次的事给我们带来了几点思考？

localstorage和sessionstorage的存储量在不同的浏览器中基本是5M

localstorage和sessionstorage的存储是跟着域名来的

boss.hivescm.com下localstorage存储是5M

b2b.hivescm.com下localstorage存储也是5M

即使这次问题解决了，但是我们应该定一套方案，充分利用一个域名下，localstorage和sessionstorage的共10M空间

2.3.2. storage使用方案

全局使用的东西，共享的东西，永久存储的东西储存在localstorage中

不需要永久存储的东西在使用完毕之后要记得及时清除

如果数据量过大就不要存储在本地了，变为动态获取

可以使用存储量更大的Indexeddb，不过有兼容性问题