【Vue3+Ts】简约封装localStorage方法

★雨潇★

已于 2024-02-06 15:01:41 修改

阅读量598

点赞数 13

分类专栏： Vue.js js 文章标签： vue.js 前端 javascript

于 2024-02-06 12:05:30 首次发布

本文链接：https://blog.csdn.net/yasyList/article/details/136054661

版权

Vue.js 同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

文章介绍了如何在TypeScript项目中创建一个名为Loca的模块，提供localStorage的getter、setter和remover方法。示例展示了如何设置、获取和清除存储键值对，包括单个键和数组键的情况。

摘要由CSDN通过智能技术生成

新建ts文件

export const Loca = {
  get: (key: string): string | null => {
    const value = localStorage.getItem(key);
    return value !== null && value !== "" ? value : null;
  },
  set: (key: string, value: any): void => {
    localStorage.setItem(key, value);
  },
  remove: (key: string | string[]): void => {
    if (Array.isArray(key)) {
      key.forEach((k) => {
        localStorage.removeItem(k);
      });
    } else {
      localStorage.removeItem(key);
    }
  },
};

页面使用

import { Loca } from "@/components/public-fn.ts";

Loca.set("token", 123);

Loca.get("token");

Loca.remove("token"); 或 Loca.remove(['token','user']);