Soft Storage
⌘ K

# 快速开始

Soft Storage 提供三种方式来管理存储：

  • 结合 Vue 3中的 ref API
  • 结合 React中的 useState API
  • 在任何支持 cjs 模块或 esm 模块的项目中独立使用

此外，如果您只想使用 Web Storage 的浅层模块化封装，您可以直接转到 直接使用 部分。

注意

请注意，永远不要使用interface来为 Soft Storage 定义类型。请使用type取代之。点击 常见问题 > 关于 Interface 查看更多。

# Vue 3 用户 ⓘvue >= 3.1.0

# 安装

  • npm
  • yarn
  • pnpm 
npm install @soft-storage/vue-hooks

# 创建存储模块

在您的项目中随意创建一个文件:

// storage.ts
import { createLocalStorage } from '@soft-storage/vue-hooks';

type UserInfo = {
  token?: string;
  hasSigned: boolean;
};

export const storage = createLocalStorage<UserInfo>({
  // 存储键
  storageModuleKey: 'user_info',
  // 用于初始化
  initial: {
    hasSigned: false, // 非空属性必须初始化
    // 可选属性不能初始化
  },
});

# 在 Vue 组件中使用

<script setup lang="ts">
import { onMounted } from 'vue';
import { getUserInfo } from '@/api'; // 假设您有一个获取用户信息的异步函数
import { useStorage } from '@soft-storage/vue-hooks';
import { storage } from './storage';

/* 在Typescript的帮助下，您可以轻松地解构hook的返回值 */
const {
  refs: { token, hasSigned },
  resetters: { resetToken, resetHasSigned },
  checkers: { containsToken, containsHasSigned },
} = useStorage(storage);

onMounted(() => {
  getUserInfo().then(res => {
    token.value = res.token; // vue响应式变量(组合式API)
    hasSigned.value = true; // 同上
  });
});

const onSignOut = () => {
  resetToken(); // 重置 token 的值
  resetHasSigned(); // 重置 hasSigned 的值
};
</script>

<template>
  <div>Contains token: {{ containsToken() }}</div>
  <div>Contains hasSigned: {{ containsHasSigned() }}</div>
  <button @click="onSignOut">Sign out</button>
</template>

# React 用户 ⓘreact >= 16.8.0

# 安装

  • npm
  • yarn
  • pnpm 
npm install @soft-storage/react-hooks

# 创建存储模块

在您的项目中随意创建一个文件:

// storage.ts
import { createSessionStorage } from '@soft-storage/react-hooks';

type UserInfo = {
  token?: string;
  hasSigned: boolean;
};

export const storage = createSessionStorage<UserInfo>({
  // 存储键
  storageModuleKey: 'user_info',
  // 用于初始化
  initial: {
    hasSigned: false, // 非空属性必须初始化
    // 可选属性不能初始化
  },
});

# 在函数式组件中使用

import React, { useEffect } from 'react';
import { getUserInfo } from '@/api'; // 假设您有一个获取用户信息的异步函数
import { useStorage } from '@soft-storage/react-hooks';
import { storage } from './storage';

function UserInfoFC() {
  /* 在Typescript的帮助下，您可以轻松地解构hook的返回值 */
  const {
    tokenState: { token, setToken, resetToken, containsToken },
    hasSignedState: { hasSigned, setHasSigned, resetHasSigned, containsHasSigned },
  } = useStorage(storage);

  useEffect(() => {
    getUserInfo().then(res => {
      setToken(res.token);
      setHasSigned(true);
    });
  }, []);

  const onSignOut = () => {
    resetToken(); // 重置 token 的值
    resetHasSigned(); // 重置 hasSigned 的值
  };

  return (
    <>
      <div>Contains token: {containsToken()}</div>
      <div>Contains hasSigned: {containsHasSigned()}</div>
      <button onClick={onSignOut}>Sign out</button>
    </>
  );
}

export default UserInfoFC;

# 独立使用

# 安装

  • npm
  • yarn
  • pnpm 
npm install @soft-storage/hooks

# 创建存储模块

在您的项目中随意创建一个文件:

// storage.ts
import { createSessionStorage } from '@soft-storage/hooks';

type UserInfo = {
  token?: string;
  hasSigned: boolean;
};

export const storage = createSessionStorage<UserInfo>({
  // 存储键
  storageModuleKey: 'user_info',
  // 用于初始化
  initial: {
    hasSigned: false, // 非空属性必须初始化
    // 可选属性不能初始化
  },
});

# 在脚本中使用

import { getUserInfo } from '@/api'; // 假设您有一个获取用户信息的异步函数
import { useStorage } from '@soft-storage/hooks';
import { storage } from './storage';

const { token, hasSigned } = useStorage(storage);

(() => {
  getUserInfo().then(res => {
    token.set(res.token);
    hasSigned.set(true);
    console.log(hasSigned.get()); // true
  });
})();

const onSignOut = () => {
  token.reset(); // 将值设置为初始值。若未提供初始值，将设为 undefined
  hasSigned.reset();
  console.log(token.get(), token.exist()); // undefined, false
  console.log(hasSigned.get(), hasSigned.exist()); // false, true
};

# 关于 remove() API

提示

remove() 是不受支持的 API。点击 常见问题 > 关于 remove() 和 clear() 函数 了解更多。

# 直接使用

# 安装

  • npm
  • yarn
  • pnpm 
npm install @soft-storage/core

# 创建一个存储模块

// storage.ts
type UserInfo = {
  token?: string;
  hasSigned: boolean;
};

const storageModule = new StorageModule<UserInfo>('user_info', StorageType.SESSION);

const helper = storageModule.getHelper();
if (!helper.getExistence()) {
  // 这里的初始化是随心所欲的，没有限制
  helper.setModule({
    token: '',
    hasSigned: false,
  });
}

export { storageModule };

# 在脚本中使用

import { StorageModule, StorageType } from '@soft-storage/core';
import { getUserInfo } from '@/api'; // 假设您有一个获取用户信息的异步函数
import { storageModule } from './storage.ts';

type UserInfo = {
  token?: string;
  hasSigned: boolean;
};

(() => {
  getUserInfo().then(res => {
    storageModule.setItem('token', res.token);
    storageModule.setItem('hasSigned', true);
    console.log(storageModule.getItem('hasSigned')); // true
    console.log(storageModule.contains('token')); // true
  });
})();

const onSignOut = () => {
  storageModule.removeItem('token');
  storageModule.setItem('hasSigned', false);
  console.log(storageModule.getItem('token')); // undefined
  console.log(storageModule.size()); // 1

  // 或者
  storageModule.clear();
  console.log(storageModule.size()); // 0
};

# Next

现在，您可以享受到 TypeScript 带来的类型提示了！

ON THIS PAGE
Vue 3 用户
React 用户
独立使用
关于 remove() API
直接使用
Next