0.0.9 • Published 4 years ago
kun-storage v0.0.9
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() // 清除全部监听事件