voice-analisys-tools/docs/storage.md

本地存储

项目中使用localStorage或者sessionStorage要注意，不能在项目中直接使用localStorage或者sessionStorage。

项目中关于本地存储已经做了简单封装。位于src/base/storage.js文件中。

此文件中定义一些localStorage、sessionStorage、cookie

每当项目里有需要用到具体功能时，请先在src/base/storage/js中进行定义，然后在具体位置引入。

例如：

// 数据存储
import { MyLocalStorage, MySessionStorage } from './storage/storage';

import { MyCookie } from './storage/cookie';

/**
 * 本地存储定义
 * 应确保每个 storage 定义使用的 key 不重复，并做好注释
 * 任意localStorage的定义，必须添加 localST_ 前缀
 */
export const localST_Theme = new MyLocalStorage('theme'); // 主题
export const localST_Locale = new MyLocalStorage('locale'); // 多语言
export const localST_Authorization = new MyLocalStorage('token'); // 用户身份token

/**
 * session storage定义
 * 任意 sessionStorage的定义，必须添加 sessionST_ 前缀
 */
export const sessionST_Expire = new MySessionStorage('expire');

/**
 * cookie定义
 * 任意 cookie 的定义，必须添加 kuky_ 前缀
 */
export const kuky_UserName = new MyCookie('user_name');

每当有需要用到本地存储的场景时，应现在src/base/storage.js中定义好相应的Storage，然后再引入定义好的Storage，而非直接使用localStorage。

示例

src/base/storage.js

import { MyLocalStorage, MySessionStorage } from "./storage/storage";

export const localST_Expire = new MyLocalStorage("expire");

src/App.vue

<template>
  <div>过期时间：{{expire_value}}</div>
</template>

<script>
import {ref, onMounted} from 'vue';

import {localST_Expire} from './base/storage';

const expire_value = ref(0);

onMounted(() => {
  const expire = localST_Expire.getItem();

  expire_value.value = expire;
});
</script>

此页描述的前缀不符合前面约定的命名规范，本地存储相关定义的命名，按照此页文档描述进行。