021 本地缓存和缓存工具的封装

1、永久的保留token信息

用两个东西

localStorage

sessionStorage

第二句

`localStorage`

localStorage 是浏览器提供的一种用于在客户端本地存储数据的对象。它允许网页以键值对的形式保存数据，并且这些数据会一直保留在用户的浏览器中，除非被主动删除，即使关闭浏览器或重新启动电脑，数据依然存在。

`.setItem('token', this.token)`

.setItem() 是 localStorage 对象的一个方法，用于向本地存储中添加或更新数据。它接受两个参数：
- 第一个参数 'token' 是一个字符串，表示要存储的数据的键（key），相当于给数据起的一个名字，后续可以通过这个键来获取对应的数据。
- 第二个参数 this.token 表示要存储的数据值。this 是 JavaScript 中的一个关键字，在这里指代当前上下文对象，this.token 意味着获取当前对象中名为 token 的属性值，然后将这个值存储到本地存储中，与键 'token' 关联起来。

总体而言，这行代码的功能是将当前对象中的 token 属性值，以键 'token' 存储到浏览器的本地存储中，方便后续在页面的其他地方通过键 'token' 来获取该 token 值，比如用于身份验证等场景。

第一句

使用了 nullish coalescing 操作符（??），用于从浏览器本地存储中获取token值，如果获取失败则设置一个默认值。以下是详细解释：

`localStorage.getItem('token')`

localStorage 是浏览器提供的对象，用于在本地存储数据。getItem() 是它的一个方法，接受一个字符串参数作为键（key），这里传入 'token'，作用是从本地存储中获取键为 'token' 对应的值，即之前存储的 token 信息。如果本地存储中不存在该键，或者由于某些原因获取失败，它会返回 null 或者 undefined。

`?? ''`

?? 是 nullish coalescing 操作符，只有当左侧操作数为 null 或者 undefined 时，才会返回右侧的操作数。在这行代码中，如果 localStorage.getItem('token') 返回 null 或者 undefined，即没有成功获取到 token，那么就会使用右侧的空字符串 '' 作为 token 的值；如果成功获取到了值（不是 null 或 undefined），就使用获取到的值。

整体作用

这行代码会尝试从浏览器本地存储中获取键为 'token' 的值作为 token 变量的值，如果获取失败（值为 null 或 undefined），则将 token 变量赋值为空字符串。通常用于在需要使用 token（比如身份验证场景）时，先检查本地存储中是否有可用的 token ，没有则设置一个初始默认值。

2、可以看到就有这个值了

3、我们也可以对localStorage进行一个封装

在utils文件夹里面新建文件

这样写

这是一段代码，实现了一个简单的缓存类，并导出该类的一个实例。以下是对代码各部分的详细解释：

类定义：class Cache 定义了一个名为 Cache 的类。这个类用于管理浏览器本地存储中的缓存数据。
setCache 方法：
- setCache(key: string, value: any) 是类中的一个方法，接受两个参数：key（字符串类型）和 value（任意类型）。
- if (value) 检查传入的 value 是否为真值（非 null、非 undefined、非空字符串等）。
- localStorage.setItem(key, JSON.stringify(value)) 将 value 转换为 JSON 字符串（使用 JSON.stringify），然后将其存储到浏览器的本地存储中，键为 key。
getCache 方法：
- getCache(key: string) 接受一个字符串类型的参数 key。
- const value = localStorage.getItem(key) 尝试从本地存储中获取与 key 对应的字符串值。
- if (value) 检查获取到的 value 是否存在（非 null、非 undefined）。
- return JSON.parse(value) 如果 value 存在，将其从 JSON 字符串解析为 JavaScript 对象（使用 JSON.parse）并返回。
removeCache 方法：
- removeCache(key: string) 接受一个字符串类型的参数 key。
- localStorage.removeItem(key) 从浏览器的本地存储中删除与 key 对应的项。
clearCache 方法：
- clearCache() 是一个无参数的方法。
- localStorage.clear() 清空浏览器本地存储中的所有数据。
导出实例：export default new Cache() 创建了 Cache 类的一个实例，并将其导出。这意味着其他模块可以导入这个实例，并使用它提供的方法来管理缓存数据。

总的来说，这段代码提供了一组方法来方便地在浏览器本地存储中设置、获取、删除和清空缓存数据，并将一个 Cache 类的实例导出供其他模块使用。

在写入：

1、enum CacheType { Local, Session } 是在 TypeScript 中定义一个名为 CacheType 的枚举类型。以下是具体解释：

enum 关键字：用于声明一个枚举类型。枚举是一种特殊的数据类型，它允许定义一组具名的常量。
CacheType：枚举的名称，遵循大驼峰命名法，通常用于表示缓存类型的枚举集合。
Local 和 Session：是 CacheType 枚举的成员，它们是具有固定值的常量。在这个枚举中，Local 可能表示本地缓存类型，Session 可能表示会话缓存类型。

通过定义这样的枚举，可以更清晰地表示和区分不同的缓存类型，提高代码的可读性和可维护性。例如，在函数参数或变量声明中使用 CacheType 枚举，可以确保只能使用枚举中定义的 Local 或 Session 作为合法的值，避免出现意外的错误值。同时，枚举也方便在代码中进行条件判断和逻辑处理，例如根据不同的缓存类型执行不同的操作。

2、属性声明：typescript

storage: Storage

　　这行代码声明了一个名为 storage 的类属性，其类型为 Storage。在 JavaScript 和 TypeScript 中，localStorage 和 sessionStorage 都实现了 Storage 接口，该接口定义了一系列用于操作存储数据的方法（如 getItem、setItem、removeItem、clear 等）。这里声明 storage 属性，后续可以用来存储和操作缓存数据。

构造函数：typescript

constructor(type: CacheType) {
this.storage = type == CacheType.Local? localStorage : sessionStorage
}

constructor 是类的构造函数，当使用 new 关键字创建类的实例时，构造函数会自动被调用。它接受一个参数 type，其类型为 CacheType。CacheType 是一个之前定义的枚举类型（根据前面的代码推测，可能包含 Local 和 Session 等成员），用于表示不同的缓存类型。
this.storage = type == CacheType.Local? localStorage : sessionStorage 是一个三元表达式。它的作用是根据传入的 type 值来决定将哪个存储对象赋值给 this.storage 属性。如果 type 的值等于 CacheType.Local（即表示本地缓存类型），那么将 localStorage 赋值给 this.storage；否则（也就是 type 是其他值，比如 CacheType.Session 表示会话缓存类型），将 sessionStorage 赋值给 this.storage。