From 4f8c04cf3f2eb36d28f2803be5948cad9878ba89 Mon Sep 17 00:00:00 2001 From: dreambo8563 Date: Tue, 12 Feb 2019 23:14:47 +0800 Subject: [PATCH] feat(storage): support sessionStorage --- package.json | 2 +- src/main.ts | 50 +++++++++++++++++++++++++++++-------------------- types/main.d.ts | 33 ++++++++++++++++---------------- 3 files changed, 47 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index eae2be0..f489629 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-storage-watcher", - "version": "1.0.2", + "version": "1.1.0", "author": "dreambo8563", "main": "dist/vue-storage-watcher.umd.min.js", "private": false, diff --git a/src/main.ts b/src/main.ts index e92054f..7437c1b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,8 @@ import Vue, { VueConstructor } from "vue"; -type lsOption = { - prefix: string; +export type lsOption = { + prefix?: string; + storage?: "local" | "session"; }; interface ILSWatcher { // constuctor(op: lsOption): void; @@ -19,9 +20,23 @@ interface ILSWatcher { class LSWatcher { // 内置事件队列 private queue: Map> = new Map(); - private prefix = ""; + private prefix: string; + private storageObj: Storage; constructor(options: lsOption) { - this.prefix = options.prefix || "lswatcher_"; + const { prefix, storage } = options; + this.prefix = prefix || ""; + const storagePrefix = storage || "local"; + if (!["local", "session"].includes(storagePrefix)) { + throw new Error("storage param should be 'local' or 'session'"); + } + switch (storagePrefix) { + case "session": + this.storageObj = window.sessionStorage; + break; + default: + this.storageObj = window.localStorage; + break; + } } // 注册事件 on(key: string, fn: Function, immediate: boolean = false): Symbol { @@ -44,7 +59,7 @@ class LSWatcher { value: payload, expire: expire !== null ? new Date().getTime() + expire : null }); - window.localStorage.setItem(this.prefix + key, stringifyValue); + this.storageObj.setItem(this.prefix + key, stringifyValue); // 通知订阅者 this.broadcast(this.prefix + key, payload); } @@ -81,26 +96,26 @@ class LSWatcher { * Clear storage */ clear(): void { - if (window.localStorage.length === 0) { + if (this.storageObj.length === 0) { return; } const regexp = new RegExp(`^${this.prefix}.+`, "i"); const removedKeys: string[] = []; - for (const k of Object.keys(window.localStorage)) { + for (const k of Object.keys(this.storageObj)) { if (regexp.test(k) === false) { continue; } removedKeys.push(k); } for (const key of removedKeys) { - window.localStorage.removeItem(key); + this.storageObj.removeItem(key); } this.broadcastAll(null); this.queue.clear(); } // 获取值 get(key: string, def = null): any { - const item = window.localStorage.getItem(this.prefix + key); + const item = this.storageObj.getItem(this.prefix + key); if (item !== null) { try { @@ -113,7 +128,7 @@ class LSWatcher { if (data.expire >= new Date().getTime()) { return data.value; } - window.localStorage.removeItem(this.prefix + key); + this.storageObj.removeItem(this.prefix + key); } catch { return def; } @@ -122,10 +137,10 @@ class LSWatcher { return def; } init(): void { - const keys = Object.keys(window.localStorage); + const keys = Object.keys(this.storageObj); for (const k of keys) { - const item = window.localStorage.getItem(k); + const item = this.storageObj.getItem(k); if (item !== null) { try { @@ -146,7 +161,7 @@ class LSWatcher { * @return {boolean} */ remove(key: string): void { - window.localStorage.removeItem(this.prefix + key); + this.storageObj.removeItem(this.prefix + key); this.broadcast(this.prefix + key); } // 取消订阅 @@ -156,15 +171,10 @@ class LSWatcher { } // 暂时只用单例 export type LsWatcherPlugin = { - install( - vue: VueConstructor, - options: { - prefix: string; - } - ): void; + install(vue: VueConstructor, options: lsOption): void; }; const instantce: LsWatcherPlugin = { - install(vue: VueConstructor, options: lsOption) { + install(vue, options) { vue.prototype.$ls = new LSWatcher(options) as ILSWatcher; } }; diff --git a/types/main.d.ts b/types/main.d.ts index cdbdf19..2dce53c 100644 --- a/types/main.d.ts +++ b/types/main.d.ts @@ -1,23 +1,22 @@ -import Vue, { VueConstructor } from "./vue"; +import Vue, { VueConstructor } from "vue"; +export declare type lsOption = { + prefix?: string; + storage?: "local" | "session"; +}; interface ILSWatcher { - on(key: string, fn: Function, immediate?: boolean): Symbol; - set(key: string, payload: any, expire?: number | null): void; - broadcast(key: string, payload?: any): void; - broadcastAll(payload?: any): void; - has(key: string): boolean; - clear(): void; - get(key: string, def?: any): any; - init(): void; - remove(key: string): void; - off(key: string, handler: Symbol): void; + on(key: string, fn: Function, immediate?: boolean): Symbol; + set(key: string, payload: any, expire?: number | null): void; + broadcast(key: string, payload?: any): void; + broadcastAll(payload?: any): void; + has(key: string): boolean; + clear(): void; + get(key: string, def?: any): any; + init(): void; + remove(key: string): void; + off(key: string, handler: Symbol): void; } export declare type LsWatcherPlugin = { - install( - vue: VueConstructor, - options: { - prefix: string; - } - ): void; + install(vue: VueConstructor, options: lsOption): void; }; declare const instantce: LsWatcherPlugin; export default instantce;