vue——storage命名冲突问题解决
Vue 解决 命名 冲突 Storage 问题
2023-09-27 14:29:10 时间
参考:客户端localStorage命名冲突问题 - 韩帅 - 博客园 (cnblogs.com)
Vue的Vue-ls使用 - 简书 (jianshu.com)
我的情况:项目采用localStorage方式储值,但变量名多后,会出现同名变量,跟其他项目冲突
解决方法:存储时,增加项目前缀名
方法一. 使用vue-ls插件
1.安装vue-ls
npm install vue-ls --save
2. main.js引入
... ... import Storage from 'vue-ls'; options = { namespace: 'vuejs_', // key键前缀 name: 'ls', // 命名Vue变量.[ls]或this.[$ls], storage: 'local', // 存储名称: session, local, memory }; Vue.use(Storage, options); ... ...
3. 组件中使用
... ...
Vue.ls.set('foo', 'boo'); // 设置有效期 Vue.ls.set('foo', 'boo', 60 * 60 * 1000); // 有效1小时 Vue.ls.get('foo'); Vue.ls.get('boo', 10); // 如果没有设置boo返回默认值10 let callback = (val, oldVal, uri) => { console.log('localStorage change', val); } Vue.ls.on('foo', callback) // 侦查改变foo键并触发回调 Vue.ls.off('foo', callback) // 删除以前的侦听器 Vue.ls.remove('foo'); // 移除
... ...
方法二. 使用js
1.新建storage.js文件,如下
/** * 封装localStorage方法,添加ls前缀,防止ls的key值命名污染 */ const prefix = 'vuejs_'; export default { /** * 获取一个值 * @param key * @return {*} */ get(key) { key = `${prefix}${key}`; let value = localStorage.getItem(key); if (!value) { return null; } return JSON.parse(value); }, /** * 存储一个值 * @param key * @param value */ set(key, value) { key = `${prefix}${key}`; localStorage.setItem(key, JSON.stringify(value)); }, /** * 删除一个值 * @param key */ remove(key) { key = `${prefix}${key}`; localStorage.removeItem(key); }, /** * 清空所有值(当前项目命名空间下的key值) */ clear() { let len = localStorage.length; let keys = []; for (let i = 0; i < len; i++) { let key = localStorage.key(i); if (key && key.startsWith(prefix)) { keys.push(key); } } keys.map((key) => localStorage.removeItem(key)); }, };
2. 组件中使用
... ... import storage from '@/util/storage.js'; ... ... storage.set('name', '张三'); storage.get('name'); storage.clear(); ... ...
相关文章
- vue学习如何引入js,封装操作localStorage本地储存的方法
- 解决Vue项目中import xxx from '@/utils' 符号下有灰色波浪线的问题
- Android Webview中Vue初始化的性能优化
- vue修改对象后加属性数组,该数组变化,dom不发生变化的问题
- Vue中全局事件总线
- vue中解决Uncaught ReferenceError: regeneratorRuntime is not defined问题
- [Vue] 08 - Vuex
- Vue 环境搭建
- 解决Vue的表格中,expand只有某些行需要展开的问题。
- vue加载显示{{xxx}}的解决方法 v-cloak
- Vue + ElementUI的电商管理系统实例18 解决serve命令中的ESLint语法错误
- vue前端项目jenkins 构建到线上 报错问题解决
- 解决vue 在flask的 jianja渲染 引用变量冲突问题
- 解决vue <router-link>在IE与火狐上点击失效(路由不跳转)问题
- vue同胞组件通讯解决方案(以下为一种另外可用vuex解决)
- Vue技术12.3列表过滤
- vue中报错Maximum call stack size exceeded
- 成功解决:Module build failed: Error: Vue packages version mismatch
- 在不使用ssr的情况下解决Vue单页面SEO问题
- 解决Vue引入百度地图JSSDK:BMap is undefined 问题
- vue 解决。我的标题不太帅的问题
- Vue格式化插件以及v-for报错解决方法
- Vue.js插件开发
- daterangepicker与vue集成,vue无法获得日期控件时间的修改解决方法
- 前端面试题汇总(主要为Vue)
- Vue 实现前进刷新,后退不刷新的效果
- 基于Vue全家桶制作的的高仿美团APP
- Vue 实践过程中的几个问题
- vue——put请求设置header后无效问题解决
- vue——keepAlive第一次无效问题及解决方法
- vue——列表页进详情页,第一次很慢,第二次就很快问题及解决方法