React项目localStorage存储数据未生效问题排查求助

LocalStorage写入失败是因为分支判断逻辑写反，和LocalStorage API本身、接口可用性无关。
你预设的逻辑是res.data.status为true时代表账号密码校验通过，为false时代表校验失败，但实际代码中写入LocalStorage的逻辑放在了if(!res.data.status)分支下——这个分支只有在校验失败时才会执行，正常登录成功走的是没有存储逻辑的else分支，自然不会有数据写入本地存储。

另外你的代码还存在三个不影响当前功能但容易引发后续问题的写法问题：

• 混用async/await和.then回调，逻辑链路不清晰，后续加需求容易写错分支
• 登录参数直接拼接在URL中，属于明文传输，有敏感信息泄露风险
• 没有加请求异常捕获，接口报错时会直接抛出未捕获的promise异常，用户无感知

async function handleSubmit(e) {
    const url = 'http://localhost/project/login.php';
    const formData = new FormData();
    // 登录相关参数统一放到FormData中传输，不要拼在URL上
    formData.append('name', name);
    formData.append('price', price);
    formData.append('avatar', "hi");
    
    try {
        const res = await axios.post(url, formData);
        // 修正判断条件：status为true时走登录成功逻辑
        if (res.data.status) {
            localStorage.setItem('username', name);
            alert(res.data.message);
            // 后续可在此处添加登录成功后的页面跳转等逻辑
        } else {
            alert(res.data.message);
        }
    } catch (err) {
        console.error('登录请求异常：', err);
        alert('登录请求失败，请检查网络后重试');
    }
}

如果改完判断逻辑还是无法写入，可以按以下顺序排查：

• 确认name变量在执行存储时是有合法值的，不是undefined、null这类空值
• 确认你是在http://localhost的服务环境下调试页面，不要用file://协议直接打开本地HTML文件，部分浏览器会在本地文件协议下限制LocalStorage读写
• 写入后可以打开浏览器开发者工具，在Application面板的LocalStorage对应域名下检查是否有对应键值写入，不要仅凭代码判断执行结果

内容的提问来源于stack exchange，提问作者Sri GnS