vite基础学习笔记：8.本地存储（以用户信息为例）

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

知识点：前端本地存储方案之localStorage

保存数据

localStorage.setItem("key", "value");

读取数据

localStorage.getItem("key");

删除数据

    localStorage.removeItem("key");
    storage.clear();//清除所有数据

首先在使用 localStorage 的时候，我们需要判断浏览器是否支持 localStorage 这个属性：

    if(! window.localStorage){
        alert("浏览器不支持localstorage");
        return false;
    }else{
        //主逻辑业务
    }

localStorage存入json的相关用法：
①将json数据转化为json字符串之后再存入localStorage：

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

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

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

1. 将接口返回数据存储到本地

①确认接口返回数据格式：如下图
②将返回数据name及token保存至本地
全部代码如下

const Login = async () => {
    await form.value.validate();
    try {
        const result = await reqLogin(loginParam);
        if (result.code == 200) {
            //如果接口调用成功，将返回的token保存
            window.localStorage.setItem("token", result.data.token);
        }
        // 跳转到另一页面
        $router.push({ path: '/one' });
    } catch (error) {
        ElMessage({
            type: "error",
            message: (error as Error).message
        })
    }
};

以上代码运行结果为：
登录成功后，本地存储中保存了name和token

2. 读取本地数据（将本地数据存储到数据仓库）

①将接口返回的值传给数据仓库
代码如下：

const Login = async () => {
    await form.value.validate();
    try {
        const result = await reqLogin(loginParam);
        if (result.code) {
            //如果接口调用成功，将返回的token值存至本地存储
            window.localStorage.setItem("token",result.data.token);
            //调用useUserStore仓库中的setToken函数，将返回的token值传给数据仓库
            userStore.setToken(result.data.token)
        }
        // 跳转到另一页面result.data.token
        $router.push({ path: '/one' });
    } catch (error) {
        ElMessage({
            type: "error",
            message: (error as Error).message
        })
    }
};

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

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

以上代码运行结果为：
登录成功后，本地存储中保存了name和token且数据仓库存储了token数据
②将本地数据赋值到数据仓库

store中的user.ts代码如下：

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

以上代码实现效果为：
刷新界面，数据仓库中的token值不会丢失

3. 本地存储判断是否要记住账号

①设置saveUser存储是否记住账号，默认设置未false
②将saveUser的值（即是否记住账号）存储到本地（key为isSave）
注意：本地存储布尔值（此处解决方案是将true存储为1，将false存储为0）

if (state.saveUser) {
window.localStorage.setItem("isSave", "1");
} else {
 window.localStorage.setItem("isSave", "0");
};

③判断本地的isSave值
若为1，说明上一次登录勾选了记住账号，恢复本地存储的登录信息，不需重新填写账号及密码；
若为0，说明上一次登录未勾选记住账号，清除本地存储的登录信息，需重新账号及密码。

代码如下：

<template>
    <div class="login">
        <p class="title">登录界面</p>
        <div class="top">
            <el-form :model="state.loginParam" :rules="rules" ref="form">
                <el-form-item label="账号" prop="phone">
                    <el-input placeholder="请输入11位手机号" v-model="state.loginParam.phone"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="code">
                    <el-input placeholder="请输入6位密码" v-model="state.loginParam.code"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-checkbox label="记住账号" v-model="state.saveUser"></el-checkbox>
                </el-form-item>
            </el-form>
        </div>
        <div class="bottom">
            <el-button type="primary" @click="Login">登录</el-button>
        </div>
    </div>
</template>

<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";
let userStore = useUserStore();

let $router = useRouter();
const state = reactive({
    loginParam: {
        phone: '',
        code: '',
    },
    saveUser: false
});
if (JSON.parse(window.localStorage.getItem("isSave")) == 1) {
    state.loginParam.phone = JSON.parse(window.localStorage.getItem("phone"));
    state.loginParam.code = JSON.parse(window.localStorage.getItem("code"));
    state.saveUser=true
}else{
    localStorage.removeItem("phone");
    localStorage.removeItem("code");
}
const Login = async () => {
    await form.value.validate();
    try {
        const result = await reqLogin(state.loginParam);
        if ((result.code = 200)) {
            //如果接口调用成功，将返回的token值存至本地存储
            window.localStorage.setItem("token", result.data.token);
            window.localStorage.setItem("phone", state.loginParam.phone);
            window.localStorage.setItem("code", state.loginParam.code);
            //调用useUserStore仓库中的setToken函数，将返回的token值传给数据仓库
            userStore.setToken(result.data.token);
            if (state.saveUser) {
                window.localStorage.setItem("isSave", "1");
            } else {
                window.localStorage.setItem("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>

显示结果如下：
①勾选记住账号，刷新浏览器，账号及密码输入框的数据不清空
②未勾选记住账号：
刷新浏览器，账号及密码输入框的数据清空，本地登录数据清空