一、介绍
在Vue.js的开发过程中，我们经常需要在客户端存储一些数据，以便在用户关闭页面或刷新后能够恢复之前的状态。Vue-ls插件就是一个为Vue.js设计的本地存储解决方案，它基于localStorage和sessionStorage，使得在Vue组件中存取数据变得异常简单。
二、安装
npm install vue-ls --save
三、使用
1、在main.js中导入插件并配置
main.js
import Vue from 'vue' import Storage from 'vue-ls'; // vue-ls 的配置 const storageOptions = { namespace: 'vue_', // key 键的前缀（随便起） name: 'ls', // 变量名称（随便起） 使用方式：Vue.变量名称 或 this.$变量名称 storage: 'local' // 存储方式: session, local, memory } Vue.use(Storage, storageOptions);
其中options是配置选项，可以设置以下字段：
- namespace：命名空间，默认为"ls"。
- name：存储名称，可以是一个数组，用于批量存储。默认为"ls"。
- storage：存储引擎，LocalStorage或SessionStorage，默认为LocalStorage。
- expries：过期时间，单位为毫秒数，默认为0，表示永不过期。
- hasProto：是否在原型上使用getter和setter，默认为true。
2、在组件中使用
app.vue
new Vue({ el: '#app', mounted: function() { 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'); // 移除 } });
3、全局使用
Vue.ls.set('key', 'value')
3、上下文使用
this.$ls.set('key', 'value')
四、API
1、获取数据
Vue.ls.get(name, def)
返回storage中 name值。在返回之前，内部解析JSON中的值
def：默认为 null。如果 key 不存在，则返回 def。
methods: { getKey () { // age 和 age2 都不存在 const age = this.$ls.get('age') const age2 = this.$ls.get('age2', 22) console.log(age) // null console.log(age2) // 22 } }
2、设置数据
Vue.ls.set(name, value, expire)
设置一个 key，并且可以设置有效时间。
expire：默认为 null。name 的有效时间，单位为毫秒。
methods: { setKey () { this.$ls.set('age', 22) // age 的有效时间为永久，除非自动清除 this.$ls.set('name', 'cez', 3000) // name 的有效时间为 3s，3s 后为 null } }
3、移除数据
Vue.ls.remove(name)
从存储中删除某一个 key，成功返回 true，否则返回 false。
methods: { removeKey () { const age = this.$ls.remove('age') console.log(age) // undefined：不管删除成功还是删除失败都会返回 undefined，和官方解析不一样，不知道为什么？？ } }
4、清空数据
Vue.ls.clear()
清空所有 key。
methods: { clearKey () { this.$ls.clear() } }
5、监听数据
Vue.ls.on(name, callback)
设置侦听器，监听 key，若发生变化时，就会触发回调函数 callback。
callback 接受三个参数：
- newValue：存储中的新值
- oldValue：存储中的旧值
- url：修改来自选项卡的 url
6、移除监听
Vue.ls.off(name, callback)
删除设置的侦听器
五、使用示例
1、单独的 js 文件
// webStorage.js import Storage from 'vue-ls'; const localStorageOptions = { namespace: 'vue-', // key prefix name: 'ls', // name variable Vue.[ls] or this.[$ls], storage: 'local' // storage name session, local, memory }; const sessionStorageOptions = { namespace: 'vue-', // key prefix name: 'ss', // name variable Vue.[ls] or this.[$ls], storage: 'session' // storage name session, local, memory }; export default { ls: Storage.useStorage(localStorageOptions).ls, ss: Storage.useStorage(sessionStorageOptions).ls };
2、使用方法
import webStorage from '@/utils/webStorage.js'; webStorage.ls.set('token'); webStorage.ss.set('token');
六、typescript+vue3使用vue-ls
1、新建 storage.ts
import Storage from 'vue-ls'; const options = { namespace: 'vuejs__', // key prefix name: 'ls', // name variable Vue.[ls] or this.[$ls], storage: 'local', // storage name session, local, memory }; const { ls } = Storage.useStorage(options) export default ls
2、组件导入
<script lang="ts" setup> import ls from "@/util/storage/" ls.set('user','admin',60*60*1000) </script>
七、注意事项
- 数据安全性：localStorage和sessionStorage中的数据是明文存储的，因此不适合存储敏感信息。对于需要保密的数据，建议使用其他更安全的方式进行存储。
- 数据大小限制：不同浏览器对localStorage和sessionStorage的存储大小有不同的限制，一般来说，单个域名下的存储限制在5MB左右。因此，不建议在客户端存储大量数据。
- 数据持久性：localStorage中的数据是持久化的，即使用户关闭浏览器或重启设备，数据仍然会保留。而sessionStorage中的数据则会在页面会话结束时被清除。因此，在选择存储方式时，需要根据实际需求进行权衡。
