Vue的Vue-ls 封装的本地存储的方法

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

一个vue封装的本地储存的方法。

YARN

yarn add vue-ls

options = {

namespace: 'vuejs__', // key键前缀

name: 'ls', // 命名Vue变量[ls]或this[$ls],

storage: 'local', // 存储名称: session, local, memory

};

Vueuse(Storage, options);

// 或 Vueuse(Storage);

new Vue({

el: '#app',

mounted: function() {

Vuelsset('foo', 'boo');

// 设置有效期

Vuelsset('foo', 'boo', 60 60 1000); //有效1小时

Vuelsget('foo');

Vuelsget('boo', 10); // 如果没有设置boo返回默认值10

});

2Vuelsset(name, value, expire)

在storage设置 name 的 value 并将 value 转化为JSON

expire: 默认为 null , name 有效时间以毫秒为单位

Vuelsclear()

清除storage

newValue: 当前storage中 name , 从持久化的JSON中解析

oldValue: 旧的storage中 name , 从持久化的JSON中解析

url: 修改来自选项卡的URL

5Vuelsoff(name, callback)

删除以前的侦听器 Vuelson(name, callback)

1、路由获取

thisdelivery_asn = this$routequerydelivery_asn;

2、非路由获取

（1）在js文件中写方法

export function getUrlKey(name,url){

return decodeURIComponent((new RegExp('[|&]' + name + '=' + '([^&;]+)(&|#|;|$)')exec(url) || [, ""])[1]replace(/\+/g, '%20')) || null

}

（2）在项目文件中引入

import { getUrlKey } from '@/utils';

（3）在项目文件中使用

thisdelivery_asn  = getUrlKey("delivery_asn ",windowlocationhref)

　如果url中参数base64编码

       let path = windowlocationhrefsplit("") //分割url

       let href = path[0]+""+path[1]

let query = Base64decode(path[1])  //解码

href = path[0]+""+ query //解码后重组

thisdelivery_asn  = getUrlKey("delivery_asn ",href)

script：

// changeName:子组件watch的 this$emit('changeName', thisprovince)的changeName，是自定义的

// lockValue：父组件的方法名

以上就是关于Vue的Vue-ls 封装的本地存储的方法全部的内容，包括:Vue的Vue-ls 封装的本地存储的方法、vue中获取url参数、vue---父组件监听子组件并获取子组件的值（子组件多个值）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！