kun-storage

一个vue的插件，优化了浏览器的web storage Api

功能

• 可以选择localStorage或者sessionStorage
• 插入的值自动JSON.stringify，取值则JSON.parse
• 支持事件监听
• 支持typescript

安装

// npm
npm install kun-storage --save

使用

import Vue from "vue";
import Storage from "kun-storage";

Vue.use(Storage);

// 在组件内使用
// this.$localStorage

Options

import Vue from "vue";
import Storage from "kun-storage";

Vue.use(Storage, {
    prefix: "your_prefix", //默认是"app_", 插入的key的前缀
    driver: "local,session" // 默认是"local"
});

// 这样注册插件则会注入两个变量到vue的原型上
// this.$localStorage
// this.$sessionStorage

属性

len: number

存储了多少key

Vue.$localStorage.len

Method

该插件会在每个设置的key前都会加入前缀, Options.prefix, 默认是app_

set(key: string, value: any): boolean

该方法在每插入一个值都会返回一个boolean来判断是否成功,在插入值之前会JSON.stringify

Vue.$localStorage.set("key1", {id: 1, name: "min"});
Vue.$localStorage.set("key2", 123);
Vue.$localStorage.set("key2", "test");
Vue.$localStorage.set("key3", [123, "test"]);

get(key: string, defalutValue: any = null): any

该方法是获取存储的值, 获取的值会自动JSON.parse, defalutValue是获取失败时返回值，默认是null

Vue.$localStorage.get("userInfo", {id: 1, name: "min"}); // 失败时会返回{id: 1, name: "min"}

remove(key: string): void

移除所要删除的key

Vue.$localStorage.remove("userInfo");

clear(all: boolean = false): void

@params all默认是false, 当false时是清除以prefix开头的key存储的值，否则为true 清除全部值

Vue.$localStorage.clear(); // 只清除以prefix开头的key存储的值
Vue.$localStorage.clear(true); // 清除所有的存储值

keys(withPrefix: boolean = false): Array<string>

获取用户存储的key, @params withPrefix表示返回的key是否带有前缀

Vue.$localStorage.keys(); // 返回存储的key
Vue.$localStorage.keys(true); // 返回存储带有前缀的key

hasKey(key: string): boolean

查看有没有存储所要查询的key

Vue.$localStorage.hasKey("userInfo");

Events

这些事件是浏览器在不同的标签页之间触发的

type Callbabk

callback函数的参数返回

type Callbabk = (newVal: any, oldVal: any, url: string) => void;

on(key: string, fn: Callbabk): this

监听要改变的key

Vue.$localStorage.on("test", (newVal, oldVal, url) => {
    console.log(newVal, oldVal, url)
});

off(key: string, fn: Callbabk): this

移除要监听的key

Vue.$localStorage.off("test", (newVal, oldVal, url) => {
    console.log(newVal, oldVal, url)
});

clearEvents(key?: string): this

@params key如果存在的话则直接把对应的key的全部监听事件清除，key不传入则清除全部监听事件

Vue.$localStorage.clearEvents("test") // 就清除test的全部监听事件
Vue.$localStorage.clearEvents() // 清除全部监听事件