视频直播源码，不同业务场景需选择不同方案去缓存数据

在开发视频直播源码时，针对不同业务场景，我们应该选择不同的方案去缓存数据。本文就针对最常见的存储方案和场景做一些分类和介绍一些在 Vue/React 中的高阶用法，助力前端开发体验和应用的稳定性。

前端缓存方案

确定不同场景缓存方案
1、针对业务枚举、标签类的，这类的信息往往都是字典数据，数据量不大并且更新不频繁，更新前后改动也不大，这类信息是可以存储到localStorage中的
2、使用应用期间产生的应用/配置数据：这个数据量不大的情况下就可以使用sessionStorage，否则应该考虑其他状态管理方案，比如pinia
3、单用户的基础信息这类信息一般情况是用户在登陆成功之后后端返回的信息，这类信息条目确定，也适合存储到localStorage
4、根据用户隔离的缓存数据：这个如果用localStorage就不符合我们说的数据条目必须可控原则，应该存储到indexedDB中
5、随业务活动增长的数据缓存：这个毋庸置疑应该选择使用indexedDB，localStorage迟早会爆
6、特殊场景的二进制、媒体数据：这个也应该选择使用indexedDB

规范
在视频直播源码中对于所有缓存的key都应该集中管理，数量多了之后要做分级管理，用枚举来管理，避免随处用随处起名的坏习惯。

我们可以单独把项目使用到的常量单独维护, 从一个出口暴露出去

├── src
│   ├── modules
│   │   ├── constant
│   │   │   └── cache.ts // 缓存相关
│   │   │   └── index.ts // 出口

举个🌰子：

// cache.ts
export enum CacheKeyEnum {
  USER_INFO = 'user-info',
  // ...
}

// index.ts
export * from './cache'

// 使用
import { CacheKeyEnum } from '~/modules/constant'

function getUserCacheInfo() {
  return localStorage.getItem(CacheKeyEnum.USER_INFO)
}

这样在视频直播源码中统一管理key会让项目更易于维护。

在项目中更简易、优雅的操作缓存

Vue
得益于@vueuse，我们可以用useStorage方法把对sessionStorage和localStorage的操作简化并且和Vue的响应系统结合：

第一个参数为缓存的key，对应setItem的第一个参数，第二个参数为初始数据，返回值为一个Ref类型的对象，可以直接操作state.value = { hello: “hello”, greetinf: “Hi” }响应式更改缓存中的值，下面是一些文档中的例子：

import { useStorage } from '@vueuse/core'

// bind object
const state = useStorage('my-store', { hello: 'hi', greeting: 'Hello' })

// bind boolean
const flag = useStorage('my-flag', true) // returns Ref<boolean>

// bind number
const count = useStorage('my-count', 0) // returns Ref<number>

// bind string with SessionStorage
const id = useStorage('my-id', 'some-string-id', sessionStorage) // returns Ref<string>

// delete data from storage
state.value = null

React
同样的在React中也有类似的库react-use，其中也有useLocalStorage,对应的用法：

import {useLocalStorage} from 'react-use';

const Demo = () => {
  const [value, setValue] = useLocalStorage('my-key', 'foo');

  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue('bar')}>bar</button>
      <button onClick={() => setValue('baz')}>baz</button>
    </div>
  );
};

useLocalStorage(key);
useLocalStorage(key, initialValue);
useLocalStorage(key, initialValue, raw);

key — localStorage 键来管理。
initialValue — 要设置的初始化值，如果localStorage中的值为空。
raw — boolean，如果设为 true，钩子将不会尝试 JSON 序列化存储的值。

简化indexedDB的操作

说了sessionStorage和localStorage的优雅用法，也来说说如何优雅的使用indexedDB

key-value方式的使用
你可以简单理解为localStorage的异步版本、可以存储大体积数据的版本
有这样一个库可以帮我们简化这个操作：localForage

使用方法也很简单：

import localForage from "localforage";

// 你的项目ID
const PID = "your project's ID"
// 实例
let lfInstance: LocalForage

/** 初始化LF */
export function initLFInstance(): LocalForage {
  if (!lfInstance)
    lfInstance = localforage.createInstance({ name: PID })

  return lfInstance
}

/**
 * 设置或读取缓存信息, null: 删除，传参：更新，不传参：获取
 * @param key storage key
 * @param data storage data
 * @returns storage data | null
 */
export function useIndexedDB<T, K extends string>(key: K, data?: T | null): Promise<T | null> {
  if (!lfInstance) {
    console.error('lfInstance is not initialized')
    return Promise.resolve(null)
  }
  else {
    return data === null
      ? (lfInstance!.removeItem(key) as unknown as Promise<null>)
      : data === undefined
        ? lfInstance!.getItem(key)
        : lfInstance!.setItem(key, data)
  }
}

在视频直播源码启动的时候调用一次initLFInstance方法，之后就可以用封装好的useIndexedDB方法来操作indexedDB了

SQL级别的存储数据
这种可以直接用原生的写法也可以考虑用Dexie.js来操作，会方便很多,比如前面说的切换用户数据的缓存我们就可以用这个来处理：

构建：

import type { Table } from 'dexie'
import Dexie from 'dexie'
import { IndexedDBKeys } from '../constant'

// 用户数据表类型
interface IUserData {
  id?: number
  name: string
  phone: string
  age: number
}

export class AppDataDexie extends Dexie {
  userDataDB!: Table<IUserData>

  constructor() {
    super(IndexedDBKeys.UserData)
    this.version(1).stores({
      userDataDB: '++id, name, phone, age',
    })
  }
}

/** 构建DB实例 */
const db = new AppDataDexie()

/** 导出用户db操作 */
export const userDB = db.userDataDB

使用：

import { userDB } from './db'
userDB.add({ id: 1, name: 'senar', phone: 'xxxx', age: 22 })
// ...更多操作可以查看文档
// https://dexie.org/docs/Tutorial/Getting-started

其他一些边界检测

我们前面说了sessionStorage和localStorage是有5M容量限制的，我们如何知道用户的使用情况呢？

// 检测localStorage使用空间
function sieOfLS() {
  return Object.entries(localStorage).map(v => v.join('')).join('').length;
}

// 检测sessionStorage使用空间
function sieOfSS() {
  return Object.entries(sessionStorage).map(v => v.join('')).join('').length;
}

indexedDB也是可以检测容量的，可能在safari浏览器上有兼容性问题，大家也可以参考下：

export async function getCacheUsage() {
  const { quota, usage } = await navigator.storage.estimate()
  const remainingSpace = quota! - usage!
  const unit = 1073741824
  const text = `已使用：${(usage ?? 0) / unit} GB, 剩余可用缓存空间：${remainingSpace / unit} GB`
  console.info(text)
  return remainingSpace
}