# 本地存储

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

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

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

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

例如：

```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

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

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

> src/App.vue

```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>
```

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