62 lines
2.0 KiB
Vue
62 lines
2.0 KiB
Vue
|
<script setup>
|
|||
|
|
import { onMounted, ref } from "vue";
|
|||
|
|
import { createStorage, notify } from "../svfs.js";
|
|||
|
|
|
|||
|
|
const storage = createStorage("demo:");
|
|||
|
|
const count = ref(0);
|
|||
|
|
const key = ref("greeting");
|
|||
|
|
const value = ref("你好，SVFS");
|
|||
|
|
const output = ref("");
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
count.value = (await storage.get("visits")) || 0;
|
|||
|
|
count.value += 1;
|
|||
|
|
await storage.set("visits", count.value);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
async function reset() {
|
|||
|
|
await storage.set("visits", 0);
|
|||
|
|
count.value = 0;
|
|||
|
|
notify("计数已清零");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function run(action) {
|
|||
|
|
try {
|
|||
|
|
if (action === "set") {
|
|||
|
|
let parsed = value.value;
|
|||
|
|
try { parsed = JSON.parse(value.value); } catch { /* 字符串原样存 */ }
|
|||
|
|
await storage.set(key.value, parsed);
|
|||
|
|
output.value = `set(${key.value}) 成功`;
|
|||
|
|
} else if (action === "get") {
|
|||
|
|
output.value = `get(${key.value}) → ${JSON.stringify(await storage.get(key.value))}`;
|
|||
|
|
} else if (action === "remove") {
|
|||
|
|
await storage.remove(key.value);
|
|||
|
|
output.value = `remove(${key.value}) 成功`;
|
|||
|
|
} else {
|
|||
|
|
output.value = `keys() → ${JSON.stringify(await storage.keys())}`;
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
output.value = `失败: ${err.message}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<section class="panel">
|
|||
|
|
<h2>storage —— 按插件隔离的键值存储（本插件已打开 {{ count }} 次）</h2>
|
|||
|
|
<p>
|
|||
|
|
<input v-model="key" placeholder="键" size="14" />
|
|||
|
|
<input v-model="value" placeholder="值（支持 JSON）" size="22" />
|
|||
|
|
<button class="act" @click="run('set')">写入</button>
|
|||
|
|
<button class="act" @click="run('get')">读取</button>
|
|||
|
|
<button class="act" @click="run('remove')">删除</button>
|
|||
|
|
<button class="act" @click="run('keys')">全部键</button>
|
|||
|
|
</p>
|
|||
|
|
<pre>{{ output || "（操作结果显示在这里）" }}</pre>
|
|||
|
|
<p class="muted">
|
|||
|
|
<button class="act" @click="reset">打开计数清零</button>
|
|||
|
|
换台机器 / 重装插件，这个存储也不会串到别的插件。
|
|||
|
|
</p>
|
|||
|
|
</section>
|
|||
|
|
</template>
|