Vue本地存储插件vue-ls

小咪咪 2021-09-08 19:52 637阅读 0赞

Vue插件，用于从Vue上下文中使用本地Storage，会话Storage和内存Storage

git地址：[https://github.com/RobinCK/vue-ls][https_github.com_RobinCK_vue-ls]

## 1. 安装 ##

NPM
    npm install vue-ls --save
    
    YARN
    yarn add vue-ls

## 2. 使用 ##

import Storage from 'vue-ls';
     
    options = {
      namespace: 'vuejs__', // key键前缀
      name: 'ls', // 命名Vue变量.[ls]或this.[$ls],
      storage: 'local', // 存储名称: session, local, memory
    };
     
    Vue.use(Storage, options);
    // 或 Vue.use(Storage);
     
    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'); // 移除
        }
    });

## Global(全局)     ：`Vue.ls` ##

## Context（上下文）：`this.$ls` ##

## 3. API说明 ##

### 1. Vue.ls.get(name, def) ###

**返回storage中 name值。在返回之前，内部解析JSON中的值**  
def: 默认null, 如果为设置则返回 name .

### 2.Vue.ls.set(name, value, expire) ###

**在storage设置 name 的 value .并将 value 转化为JSON**  
expire: 默认为 null , name 有效时间以毫秒为单位

### 3. Vue.ls.remove(name) ###

**从storage中移除 name . 成功移除 true, 否则返回false.**

### Vue.ls.clear() ###

**清除storage.**

### 4. Vue.ls.on(name, callback) ###