vite基础学习笔记：9.本地存储（数据转换问题）

说明：自学做的笔记和记录，如有错误请指正

1. 对象的本地存储

①若将json对象（登录信息）存入本地，需将登录信息（下图的state.loginParam）转换为json字符串才可保存

 知识点：将json数据转化为json字符串之后再存入localStorage：

    var d=JSON.stringify(jsondata);
    storage.setItem("data",d);

存储的信息如下：

②将存入本地的登录信息读取出来后是json字符串，需转换为json对象才可以使用

知识点：将存入的json字符串取出来，并转换成json对象：

    var json=storage.getItem("data");
    var jsonObj=JSON.parse(json);

2. 本地存储代码封装

封装的优点：可多次复用，避免重复的类型判断

①封装：在utils文件夹下新建local.ts文件，代码如下

export const SET_TOKEN = function (key: string, value: string | object) {
  //判断val是否为string类型，如果不是，将json数据转化为json字符串
  const val = typeof value === "string" ? value : JSON.stringify(value);
  window.localStorage.setItem(key, val);
};

export const GET_TOKEN = function (key: string) {
    const val =window.localStorage.getItem(key)
    if(!val){
        return null
    }else{
        //判断读取到的本地数据是否为（json数据转化的json字符串)，如果是，将json字符串转换成json对象
        return val[0] === '{' ? JSON.parse(val) : val 
    }
};

// 清除本地存储数据
export const REMOVE_TOKEN=function(key: string){
    window.localStorage.removeItem(key)
}

②引用：数据仓库中引用本地存储的函数

代码如下:

//定义相关用户的仓库
import { defineStore } from "pinia";
import {GET_TOKEN} from '../../utils/local';
const useUserStore = defineStore('user', {
    //数据，注意 state 是一个函数, 函数的返回值才是真正定义的数据
    state: () => {
        return {
            token:GET_TOKEN('token')||{},
        }
    },
    //修改状态的方法
    actions: {
        setToken(token){
            this.token = token;
        }
    },
    //计算属性
    getters: {

    }
});
//获取仓库方法对外暴露
export default useUserStore;    

③登录界面：

代码如下：

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { reqLogin } from "../../api/index";
import useUserStore from "../../store/modules/user";
import {SET_TOKEN,GET_TOKEN,REMOVE_TOKEN} from '../../utils/local';
let userStore = useUserStore();

let $router = useRouter();
const state = reactive({
    loginParam: {
        phone: '',
        code: '',
    },
    saveUser: false
});
if ((GET_TOKEN("isSave")) == 1) {
    state.loginParam.phone = GET_TOKEN("phone");
    state.loginParam.code = GET_TOKEN("code");
    state.saveUser=true
}else{
    REMOVE_TOKEN("phone");
    REMOVE_TOKEN("code");
}
const Login = async () => {
    await form.value.validate();
    try {
        const result = await reqLogin(state.loginParam);
        if ((result.code = 200)) {
            //如果接口调用成功，将返回的token值存至本地存储
            SET_TOKEN("token", result.data.token);
            SET_TOKEN("phone", state.loginParam.phone);
            SET_TOKEN("code", state.loginParam.code);
            //调用useUserStore仓库中的setToken函数，将返回的token值传给数据仓库
            userStore.setToken(result.data.token);
            if (state.saveUser) {
                SET_TOKEN("isSave", "1");
            } else {
                SET_TOKEN("isSave", "0");
            };
        }
        // 跳转到另一页面result.data.token
        $router.push({ path: "/one" });
    } catch (error) {
        ElMessage({
            type: "error",
            message: (error as Error).message,
        });
    }
};
// 自定义校验规则：手机号码自定义校验规则
const validatorPhone = (rule: any, value: any, callBack: any) => {
    // rule 表单校验的规则对象  value：当前文本的内容  callback：回调函数
    const reg =
        /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
    if (reg.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的手机号格式"));
    }
};
// 自定义校验规则：验证码自定义校验规则
const validatorCode = (rule: any, value: any, callBack: any) => {
    // rule 表单校验的规则对象  value：当前文本的内容  callback：回调函数
    if (/^\d{6}$/.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的验证码格式"));
    }
};
// 获取form组件实例
let form = ref<any>();
const rules = {
    phone: [{ trigger: "change", validator: validatorPhone }],
    code: [{ trigger: "change", validator: validatorCode }],
};
</script>