Vue.js开发中基于localStorage与sessionStorage的本地存储利器：Vue-ls插件使用详解

一、介绍

在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中的数据则会在页面会话结束时被清除。因此，在选择存储方式时，需要根据实际需求进行权衡。