Vue-ls 详解

Vue-ls 的详解

官方网址


作用

Vue-ls 是 Vue 的一个插件,用于操作 Local Storage(本地存储)、Session Storage(会话存储)、Memory(内存存储)。


安装

CDN

https://unpkg.com/vue-ls

NPM

npm install vue-ls --save

Yarn

yarn add vue-ls


使用

import Vue from 'vue'
import Storage from 'vue-ls'

// vue-ls 的配置
const storageOptions = {
    namespace: 'vue_',   // key 键的前缀(随便起)
  	name: 'ls',          // 变量名称(随便起) 使用方式:Vue.变量名称 或 this.$变量名称
  	storage: 'local'     // 作用范围:local、session、memory
}

Vue.use(Storage, storageOptions)
// login.vue
methods: {
    setKey () {
      this.$ls.set('name', 'cez')
    }
  }

结果:


Global

全局使用方式

Vue.ls


Context

上下文使用方式

this.$ls


API

Vue.ls.get (name, def)

作用:获取存储中的 key

name:要获取的 key;

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
    }
  }

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
    }
}

Vue.ls.remove (name)

作用:从存储中删除某一个 key,成功返回 true,否则返回 false。

methods: {
    removeKey () {
        const age = this.$ls.remove('age')
        console.log(age)   // undefined:不管删除成功还是删除失败都会返回 undefined,和官方解析不一样,不知道为什么??
    }
}

官方解析:


Vue.ls.clear ( )

作用:清空所有 key。

methods: {
    clearKey () {
        this.$ls.clear()
    }
}

Vue.ls.on (name, callback)

作用:设置侦听器,监听 key,若发生变化时,就会触发回调函数 callback。

callback 接受三个参数:

newValue:存储中的新值

oldValue:存储中的旧值

url:修改来自选项卡的 url


Vue.ls.off (name, callback)

作用:删除设置的侦听器

如果有小伙伴知道 Vue.ls.on(name, callback) 的用法(最好有代码),可以和我分享一下吗?谢谢啦 ^__^

  • 18
    点赞
  • 74
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue是一种用于构建用户界面的渐进式JavaScript框架,而vue-validator是一个为Vue.js提供数据验证的插件。 vue-validator允许我们在Vue组件中定义验证规则,以确保用户输入的数据符合预期。它提供了一种简洁和灵活的方式来处理表单验证,可以方便地与Vue的数据绑定机制结合使用。 使用vue-validator,我们可以定义验证规则并将其应用于表单输入控件。它支持多种验证规则,如必填、最大长度、最小长度、正则表达式等。我们可以根据需要选择适当的规则,并将其应用于表单控件的v-model指令上。 验证结果可以以不同的方式呈现给用户。vue-validator提供了多种内置的验证指令,如v-validate、v-minLength、v-maxLength等,我们可以将这些指令应用于表单输入控件上,以显示验证结果。此外,我们还可以自定义验证指令,以满足具体项目的需求。 除了基本的验证功能,vue-validator还提供了一些高级功能。比如,它可以在异步验证过程中显示加载状态,并根据后端返回的验证结果更新界面。此外,它还支持字段间的依赖验证,即一个字段的验证结果依赖于其他字段的值。 总之,vue-validator是一个非常有用的插件,使得表单验证变得简单和灵活。它与Vue.js良好地集成,提供了丰富的验证规则和灵活的验证指令,可满足各种验证需求。无论是简单的表单验证还是复杂的数据验证,vue-validator都可以帮助我们轻松地实现。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值