storage.md 2.1 KB

本地存储

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

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

此文件中定义一些localStoragesessionStoragecookie

每当项目里有需要用到具体功能时,请先在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>

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