数据存储的封装

vue2的封装:

export default {
  // 获取本地存储的数据
  get(key) {
    return JSON.parse(localStorage.getItem(key));
  },

  // 设置本地存储中的数据
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },

  // 清除本地存储
  clear() {
    localStorage.clear();
  },
};

使用(在需要使用的页面进行引用):

import local from "@/utils/local.js";

 if (res.data.code === 0) {
            //存储token
            local.set("token", res.data.token);
            // 存储个人身份
            local.set("role", res.data.role);

            console.log(res.data.role);
            //跳转到首页
            this.$router.push("/index");
            // //刷新一次，重新加载路由
            // window.location.reload();
}

vue3的封装:

const storage = {
  // 获取本地存储的数据
  get(key: string): any {
    return JSON.parse(localStorage.getItem(key)!);
  },

  // 设置本地存储中的数据
  set(key: string, value: any): void {
    localStorage.setItem(key, JSON.stringify(value));
  },

  // 清除本地存储
  clear(): void {
    localStorage.clear();
  },
};

// 可以使用这个默认导出的对象，并通过调用 storage.get()、storage.set() 和 storage.clear() 方法来访问本地存储的数据了

export default storage;

使用:

import storage from "@/utils/local";

  if (res.data.code === 0) {
      storage.set("token", res.data.token); //存储token
      storage.set("role", res.data.role); // 存储个人身份
      router.push("/index"); //跳转路由
    }