buzzts

支持任意 JavaScript 环境或框架

Storage 操作工具集

localStorage

localStorage 操作演示组件，支持增删改查和清空。

基础用法

查看代码

vue

<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue";
import { StorageWrapper, StorageType } from "buzzts";

const localStorageWrapper = new StorageWrapper(StorageType.Local);

type DemoItem = { label: string; key: string; rawValue: any; value: string };

const demos: DemoItem[] = [
  { label: "字符串示例", key: "localKey1", rawValue: "localValue1", value: 'localValue1' },
  { label: "数字示例", key: "localKey2", rawValue: 12345, value: "12345" },
  { label: "布尔值示例", key: "localKey3", rawValue: true, value: "true" },
  { label: "对象示例", key: "localKey4", rawValue: { a: 1, b: "test" }, value: '{"a":1,"b":"test"}' },
  { label: "数组示例", key: "localKey5", rawValue: [1, 2, 3], value: "[1,2,3]" },
];

const selectedIndex = ref(0);
const key = ref(demos[0].key);
const val = ref(demos[0].value);
const rawVal = ref(demos[0].rawValue);
const result = ref("");

const func = ref("");
const argsStr = ref("");

function setItem() {
  func.value = "set";
  // JSON.stringify rawVal，方便展示调用参数
  argsStr.value = `"${key.value}", ${JSON.stringify(rawVal.value)}`;

  try {
    // 存储时统一用 JSON.stringify
    localStorageWrapper.set(key.value, JSON.stringify(rawVal.value));
    result.value = `localStorage 设置成功: key=${key.value}, value=${JSON.stringify(rawVal.value)}`;
  } catch (e) {
    result.value = `设置失败: ${(e as Error).message}`;
  }
}

function getItem() {
  func.value = "get";
  argsStr.value = `"${key.value}"`;

  try {
    const v = localStorageWrapper.get(key.value);
    if (v === null) {
      result.value = "无对应值";
      return;
    }
    // 尝试 JSON.parse 还原原始类型
    try {
      const parsed = JSON.parse(v);
      result.value = `localStorage 读取到: ${JSON.stringify(parsed)}`;
    } catch {
      // 解析失败，直接显示字符串
      result.value = `localStorage 读取到: ${v}`;
    }
  } catch (e) {
    result.value = `读取失败: ${(e as Error).message}`;
  }
}

function removeItem() {
  func.value = "remove";
  argsStr.value = `"${key.value}"`;

  try {
    localStorageWrapper.remove(key.value);
    result.value = `localStorage 删除 key=${key.value} 成功`;
  } catch (e) {
    result.value = `删除失败: ${(e as Error).message}`;
  }
}

function clearStorage() {
  func.value = "clear";
  argsStr.value = "";

  try {
    localStorageWrapper.clear();
    result.value = "localStorage 已清空所有数据";
  } catch (e) {
    result.value = `清空失败: ${(e as Error).message}`;
  }
}

function selectDemo(index: number) {
  selectedIndex.value = index;
  key.value = demos[index].key;
  rawVal.value = demos[index].rawValue;
  val.value = demos[index].value;
  result.value = "";
  func.value = "";
  argsStr.value = "";
}

watch(key, () => {
  result.value = "";
  func.value = "";
  argsStr.value = "";
});

watch(rawVal, (newVal) => {
  // 当 rawVal 改变时，同步更新 val 的字符串表示，方便展示
  val.value = JSON.stringify(newVal);
});

onMounted(() => {
  selectDemo(0);
});

const resultText = computed(() => {
  if (!func.value) return "请点击操作按钮";
  return `localStorageWrapper.${func.value}(${argsStr.value})`;
});
</script>

<template>
  <n-card title="localStorage 操作演示 - 多数据类型支持">
    <n-space vertical size="large">
      <n-space wrap>
        <n-button
          v-for="(item, index) in demos"
          :key="index"
          size="small"
          :type="selectedIndex === index ? 'primary' : 'default'"
          @click="selectDemo(index)"
        >
          {{ item.label }}
        </n-button>
      </n-space>

      <n-space>
        <n-input v-model:value="key" placeholder="请输入 key" style="width: 200px" />
        <!-- 这里用 textarea 方便编辑复杂 JSON -->
        <n-input
          v-model:value="val"
          placeholder="请输入 value (JSON 格式)"
          style="width: 300px"
          type="textarea"
          rows="3"
          @input="(e) => {
            try {
              rawVal.value = JSON.parse(e.target.value);
            } catch {
              rawVal.value = e.target.value;
            }
          }"
        />
      </n-space>

      <n-space>
        <n-button type="success" @click="setItem">设置</n-button>
        <n-button type="primary" @click="getItem">读取</n-button>
        <n-button type="warning" @click="removeItem">删除</n-button>
        <n-button type="error" @click="clearStorage">清空全部</n-button>
      </n-space>
      <n-gradient-text type="info" v-if="resultText"> {{ resultText }} </n-gradient-text>
      <n-text style="white-space: pre-wrap; margin-top: 12px;" v-if="result">{{ result }}</n-text>
    </n-space>
  </n-card>
</template>

参数

参数属性	说明	类型	默认值
key	存储的键名	`string`	无
value	存储的值	`string`	无

返回值	说明
void	操作后通过界面显示结果

使用 StorageWrapper 封装 localStorage。
支持自动序列化和反序列化。
提供增删改查和清空操作。

sessionStorage

sessionStorage 操作演示组件，支持增删改查和清空。

基础用法

查看代码

vue

<script setup lang="ts">
import { ref, watch, onMounted, computed } from "vue";
import { StorageWrapper, StorageType } from "buzzts";

const sessionStorageWrapper = new StorageWrapper(StorageType.Session);

type DemoItem = { label: string; key: string; rawValue: any; value: string };

const demos: DemoItem[] = [
  { label: "字符串示例", key: "sessionKey1", rawValue: "sessionValue1", value: "sessionValue1" },
  { label: "数字示例", key: "sessionKey2", rawValue: 2023, value: "2023" },
  { label: "布尔值示例", key: "sessionKey3", rawValue: false, value: "false" },
  { label: "对象示例", key: "sessionKey4", rawValue: { name: "vue", version: 3 }, value: '{"name":"vue","version":3}' },
  { label: "数组示例", key: "sessionKey5", rawValue: [1, 2, 3, 4], value: "[1,2,3,4]" },
];

const selectedIndex = ref(0);
const key = ref(demos[0].key);
const val = ref(demos[0].value);
const rawVal = ref(demos[0].rawValue);
const result = ref("");

const func = ref("");
const argsStr = ref("");

function setItem() {
  func.value = "set";
  argsStr.value = `"${key.value}", ${JSON.stringify(rawVal.value)}`;

  try {
    sessionStorageWrapper.set(key.value, JSON.stringify(rawVal.value));
    result.value = `sessionStorage 设置成功: key=${key.value}, value=${JSON.stringify(rawVal.value)}`;
  } catch (e) {
    result.value = `设置失败: ${(e as Error).message}`;
  }
}

function getItem() {
  func.value = "get";
  argsStr.value = `"${key.value}"`;

  try {
    const v = sessionStorageWrapper.get(key.value);
    if (v === null) {
      result.value = "无对应值";
      return;
    }
    try {
      const parsed = JSON.parse(v);
      result.value = `sessionStorage 读取到: ${JSON.stringify(parsed)}`;
    } catch {
      result.value = `sessionStorage 读取到: ${v}`;
    }
  } catch (e) {
    result.value = `读取失败: ${(e as Error).message}`;
  }
}

function removeItem() {
  func.value = "remove";
  argsStr.value = `"${key.value}"`;

  try {
    sessionStorageWrapper.remove(key.value);
    result.value = `sessionStorage 删除 key=${key.value} 成功`;
  } catch (e) {
    result.value = `删除失败: ${(e as Error).message}`;
  }
}

function clearStorage() {
  func.value = "clear";
  argsStr.value = "";

  try {
    sessionStorageWrapper.clear();
    result.value = "sessionStorage 已清空所有数据";
  } catch (e) {
    result.value = `清空失败: ${(e as Error).message}`;
  }
}

function selectDemo(index: number) {
  selectedIndex.value = index;
  key.value = demos[index].key;
  rawVal.value = demos[index].rawValue;
  val.value = demos[index].value;
  result.value = "";
  func.value = "";
  argsStr.value = "";
}

watch(key, () => {
  result.value = "";
  func.value = "";
  argsStr.value = "";
});

watch(rawVal, (newVal) => {
  val.value = JSON.stringify(newVal);
});

onMounted(() => {
  selectDemo(0);
});
const resultText = computed(() => {
  if (!func.value) return "请点击操作按钮";
  return `sessionStorageWrapper.${func.value}(${argsStr.value})`;
});
</script>

<template>
  <n-card title="sessionStorage 操作演示 - 多数据类型支持">
    <n-space vertical size="large">
      <n-space wrap>
        <n-button
          v-for="(item, index) in demos"
          :key="index"
          size="small"
          :type="selectedIndex === index ? 'primary' : 'default'"
          @click="selectDemo(index)"
        >
          {{ item.label }}
        </n-button>
      </n-space>

      <n-space>
        <n-input v-model:value="key" placeholder="请输入 key" style="width: 200px" />
        <n-input
          v-model:value="val"
          placeholder="请输入 value (JSON 格式)"
          style="width: 300px"
          type="textarea"
          rows="3"
          @input="(e) => {
            try {
              rawVal.value = JSON.parse(e.target.value);
            } catch {
              rawVal.value = e.target.value;
            }
          }"
        />
      </n-space>

      <n-space>
        <n-button type="success" @click="setItem">设置</n-button>
        <n-button type="info" @click="getItem">读取</n-button>
        <n-button type="warning" @click="removeItem">删除</n-button>
        <n-button type="error" @click="clearStorage">清空全部</n-button>
      </n-space>

      <n-gradient-text type="info" v-if="resultText">{{ resultText }}</n-gradient-text>
      <n-text style="white-space: pre-wrap; margin-top: 12px;" v-if="result">{{ result }}</n-text>
    </n-space>
  </n-card>
</template>

参数

参数属性	说明	类型	默认值
key	存储的键名	`string`	无
value	存储的值	`string`	无

返回值	说明
void	操作后通过界面显示结果

使用 StorageWrapper 封装 sessionStorage。
支持自动序列化和反序列化。
提供增删改查和清空操作。

cookies

Cookie 操作演示组件，支持增删改查和清空。

基础用法

Cookie 操作演示

expires (天)

天数

path

路径

secure

sameSite

SameSite

请点击按钮执行操作

查看代码

vue

<script setup lang="ts">
import { ref, watch, computed, onMounted } from "vue";
import { CookieWrapper } from "buzzts";

const cookieWrapper = new CookieWrapper();

type DemoItem = { label: string; key: string; value: string; options?: Record<string, any> };

const demos: DemoItem[] = [
  { label: "简单设置读取示例1", key: "cookieKey1", value: "cookieValue1" },
  { label: "简单设置读取示例2", key: "cookieKey2", value: "cookieValue2" },
  { label: "设置15分钟过期", key: "cookieKey3", value: "expiresIn1m", options: { expires: 1/96, path: "/" } },
  { label: "设置带Secure和SameSite", key: "cookieKey4", value: "secureSameSite", options: { expires: 7, path: "/", secure: true, sameSite: "Strict" } },
  { label: "设置自定义路径", key: "cookieKey5", value: "customPath", options: { expires: 3, path: "/test" } },
];

const selectedIndex = ref(0);
const key = ref(demos[0].key);
const val = ref(demos[0].value);
const options = ref<Record<string, any>>(demos[0].options || {});

const lastCall = ref<{ func: string; args: any[] } | null>(null);
const result = ref("");

function setItem() {
  try {
    lastCall.value = { func: "set", args: [key.value, val.value, options.value] };
    cookieWrapper.set(key.value, val.value, options.value);
    result.value = `Cookie 设置成功`;
  } catch (e) {
    result.value = `设置失败: ${(e as Error).message}`;
  }
}

function getItem() {
  try {
    lastCall.value = { func: "get", args: [key.value] };
    const v = cookieWrapper.get(key.value);
    result.value = v === null ? "无对应值" : `Cookie 读取到: ${v}`;
  } catch (e) {
    result.value = `读取失败: ${(e as Error).message}`;
  }
}

function removeItem() {
  try {
    lastCall.value = { func: "remove", args: [key.value, options.value] };
    cookieWrapper.remove(key.value, options.value);
    result.value = `Cookie 删除成功`;
  } catch (e) {
    result.value = `删除失败: ${(e as Error).message}`;
  }
}

function clearStorage() {
  try {
    lastCall.value = { func: "clear", args: [] };
    cookieWrapper.clear();
    result.value = "Cookie 已清空所有数据";
  } catch (e) {
    result.value = `清空失败: ${(e as Error).message}`;
  }
}

function selectDemo(index: number) {
  selectedIndex.value = index;
  key.value = demos[index].key;
  val.value = demos[index].value;
  options.value = demos[index].options || {};
  lastCall.value = null;
  result.value = "";
}

watch(key, () => {
  lastCall.value = null;
  result.value = "";
});

const resultText = computed(() => {
  if (!lastCall.value) return "请点击按钮执行操作";
  const { func, args } = lastCall.value;
  const argsStr = args.map((a) => JSON.stringify(a)).join(", ");
  return `cookieWrapper.${func}(${argsStr})`;
});

onMounted(() => {
  selectDemo(0);
});
</script>

<template>
  <n-card title="Cookie 操作演示">
    <n-space vertical size="large">
      <n-space wrap>
        <n-button
          v-for="(item, index) in demos"
          :key="index"
          size="small"
          :type="selectedIndex === index ? 'primary' : 'default'"
          @click="selectDemo(index)"
        >
          {{ item.label }}
        </n-button>
      </n-space>

      <n-space>
        <n-input v-model:value="key" placeholder="请输入 key" style="width: 200px" />
        <n-input v-model:value="val" placeholder="请输入 value" style="width: 200px" />
      </n-space>

      <n-space align="center" style="flex-wrap: wrap;">
        <n-form-item label="expires (天)">
          <n-input-number
            v-model:value="options.expires"
            :min="0"
            style="width: 230px"
            placeholder="天数"
          />
        </n-form-item>

        <n-form-item label="path">
          <n-input v-model:value="options.path" placeholder="路径" style="width: 200px" />
        </n-form-item>

        <n-form-item label="secure">
          <n-switch v-model:value="options.secure" />
        </n-form-item>

        <n-form-item label="sameSite">
          <n-select
            v-model:value="options.sameSite"
            :options="[
              { label: 'Lax', value: 'Lax' },
              { label: 'Strict', value: 'Strict' },
              { label: 'None', value: 'None' }
            ]"
            placeholder="SameSite"
            style="width: 120px"
            clearable
          />
        </n-form-item>
      </n-space>

      <n-space>
        <n-button type="success" @click="setItem">设置</n-button>
        <n-button type="info" @click="getItem">读取</n-button>
        <n-button type="warning" @click="removeItem">删除</n-button>
        <n-button type="error" @click="clearStorage">清空全部</n-button>
      </n-space>
      <n-gradient-text type="info" v-if="resultText"> {{ resultText }} </n-gradient-text>
      <n-text style="white-space: pre-wrap; margin-top: 6px;" v-if="result">{{ result }}</n-text>
    </n-space>
  </n-card>
</template>

参数

参数属性	说明	类型	默认值
key	存储的键名	`string`	无
value	存储的值	`string`	无

返回值	说明
void	操作后通过界面显示结果

使用 CookieWrapper 封装 Cookie 操作。
设置时支持 expires 和 path 选项（默认 1 天有效期，路径 /）。
提供增删改查和清空操作。

localStorage ​

基础用法 ​

参数 ​

​

sessionStorage ​

基础用法 ​

参数 ​

​

cookies ​

基础用法 ​

参数 ​

​

localStorage

基础用法

参数

sessionStorage

基础用法

参数

cookies

基础用法

参数