应用场景中的localstorage

目录

使用示例

方法设置

---

使用示例

import React, { useEffect } from 'react'; 
import { set as lsSet, remove as lsRemove } from '@/utils/storage'  // 从utils/storage路径导入set和remove函数，这里分别被重命名为lsSet和lsRemove
import LoginForm from './loginForm';  // 导入LoginForm组件

export default function Page() {  // 定义并导出名为Page的React组件
  useEffect(() => {  // 使用useEffect钩子处理副作用
    const receiveMeg = (e: MessageEvent) => {  // 定义处理接收消息的函数
      if (e.origin.startsWith("http://127.0.0.1")) {  // 检查消息来源是否合法
        if (e.data.msg.data.vaild) {  // 检查传入的数据是否有效
          lsSet('token', e.data.msg.token)  // 如果有效，则在localStorage中设置token
          window.location.href = '/'  // 导航到首页
        }
      }
    }
    window.addEventListener('message', receiveMeg, false);  // 在window上注册消息监听器
    return () => {  // 返回一个清理函数
      window.removeEventListener('message', receiveMeg)  // 组件卸载时移除监听器
    }
  }, [])
  return <LoginForm />  // 返回LoginForm组件以渲染
}

方法设置

interface Storage {  // 定义Storage接口
  token: string  // token字符串
  token_expire: string,  // token过期时间
  chatMessageList: ChatMessage[]  // 聊天消息列表
}

type KeysWithValueType<U> = {  // 定义一个泛型类型，用于找出Storage中特定类型的所有键
  [K in keyof Storage]: Storage[K] extends U ? K : never;  // 映射类型
}[keyof Storage];

export type KEY = 'token' | 'token_expire'  // 定义token相关键的类型

export function get(key: KeysWithValueType<string>) {  // 获取localStorage中某个键的值
  return localStorage.getItem(key)
}

export function remove(key: KeysWithValueType<string>) {  // 从localStorage中移除某个键
  localStorage.removeItem(key)
}

export function set(key: KeysWithValueType<string>, value: string) {  // 设置localStorage中某个键的值
  localStorage.setItem(key, value)
}

export function getObject<T>(key: KeysWithValueType<T>) {  // 从localStorage获取一个对象
  const value = localStorage.getItem(key)
  if (value)
    return JSON.parse(value) as T
}

export function setObject<T>(key: KeysWithValueType<T>, value: T) {  // 将一个对象存储到localStorage
  localStorage.setItem(key, JSON.stringify(value))
}

export function removeObject<T>(key: KeysWithValueType<T>) {  // 从localStorage移除一个对象
  localStorage.removeItem(key)
}