vue3-storage-secure
Getting Started
Installation
yarn add vue3-storage-secure
npm install vue3-storage-secure
Vue version support
The main version Supports Vue 3.x only
Usage
The First Step
Register
import Vue3Storage from "vue3-storage-secure";
const app = createApp(App);
app.use(Vue3Storage, { namespace: "jarvis_", secureKey: "246810" })
Teh Second step
use Global ComponentCustomProperties this.$storage
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({
components: {}
})
export default class Home extends Vue {
created() {
this.$storage.setStorageSync("test-key", "testdata");
}
}
</script>
You can still use it like this:
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useStorage } from "vue3-storage-secure";
export default defineComponent({
setup() {
const storage = useStorage();
storage?.setStorageSync("test-key", "testdata22");
return {};
}
});
</script>
You can still use it like this:
<script lang="ts">
import { defineComponent } from "vue";
import { useStorage } from "vue3-storage-secure";
import { CallbackResult } from "vue3-storage-secure/dist/lib/types";
export default defineComponent({
setup() {
const storage = useStorage();
storage?.setStorage({
key: "test-key",
data: "testdata22",
success: (callback: CallbackResult) => {
console.log(callback.errMsg);
}
});
return {};
}
});
</script>
Use promise
<script lang="ts">
import { defineComponent } from "vue";
import { useStorage } from "vue3-storage-secure";
import { CallbackResult } from "vue3-storage-secure/dist/lib/types";
export default defineComponent({
setup() {
const storage = useStorage();
storage
?.setStorage({
key: "test-key",
data: "testdata22"
})
.then((successCallback: CallbackResult) => {
console.log(successCallback.errMsg);
})
.catch((failCallback: CallbackResult) => {
console.log(failCallback.errMsg);
});
const mKey = "mao";
const mValue = "yupeng";
console.log("set secure [" + mKey + "]:", mValue)
storage?.setSecureStorageSync(mKey, mValue, 20)
console.log("get secure key [" + mKey + "]:", storage?.getSecureStorageSync(mKey))
return {};
}
});
</script>
Storage API
export interface StorageInterface {
getStorage<T = any>(option: GetStorageOption<T>): Promise<GetStorageSuccessCallbackResult<T>>;
getStorageSync<T = any>(key: string): T | undefined;
getSecureStorageSync<T = any>(key: string): T | undefined;
setStorageSync(key: string, data: any, expire?: number): void;
setSecureStorageSync(key: string, data: any, expire?: number): void;
setStorage(option: SetStorageOption): Promise<CallbackResult>;
isExpire(key: string): boolean;
key(index: number): string | null;
hasKey(key: string): boolean;
removeStorage(option: RemoveStorageOption): Promise<CallbackResult>;
removeStorageSync(name: string): void;
getStorageInfo(option?: GetStorageInfoSuccessCallbackOption): Promise<CallbackResult>;
getStorageInfoSync(): GetStorageInfoOption;
clearStorage(option?: ClearStorageOption): Promise<CallbackResult>;
clearStorageSync(): void;
config(namespace?: string): void;
}
⚖️ License
MIT