详解Vue中localstorage和sessionstorage的使用
1. 项目使用中暴露出来的几个问题大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现，这样耦合度太高了，假如有一天我们需要换实现方式，或者对存储大小做一些控制，那么需要修改的代码就会很多 项目很大，那么大家起的key的名字难免会重复，而且这样也会造成全局污染 因为localstorage的使用不规范，所以造成了存储空间的浪费和不够用 2. 解决办法封装storage的使用方法，统一处理 规范storage的key值的命名规则 规范storage的使用规范 2.1. 封装统一的方法 封装成方法可以降低耦合度，可以方便切换实现方式，可以控制存储量大小 改变实现可以通过配置不同的参数来实现 编辑如图所示的项目结构 代码实现 2.2. 规范命名空间的使用 为了防止key值污染,我们可以合理使用命名空间 我们可以定义命名空间，但是不能把很多数据存储在同一对象里面，这样后面的操作量会太大 比如全局的在global下面 比如各功能系统的加上系统词缀 一个系统的命名空间规范应该提前设计好，否则真正开发起来会有很多人不按照规则使用 全局使用的东西要在README.md文档中体现出来 示例 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，不过有兼容性问题 可以在实现方案中对要存储到storage中的东西做字数限制 充分合理利用sessionstorage和localstorage的H5特性 例如：列表数据存储在vuex中其实也会存到localstorage 例如：表单校验的一些数据都用sessionstorage 3. 其他3.1. 延伸扩展 由此可以类推到事件的处理，没用的事件要及时在退出vue组件的时候清理掉 例如：this.bus.$on('aa')要用this.bus.$off('aa')卸载事件 3.2. 字符长短获取 以上就是小编整理的关于Vue中localstorage和sessionstorage的用法的全部内容，感谢你对编程之家的支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |