为何JavaScript的sessionStorage无法跨文件访问浏览器存储的值？

你的问题根源在于sessionStorage存储的是初始化时的空值，且表单更新后没有同步更新存储数据，具体细节如下：

错误原因 #

1. 初始化时存储空值：
   你在useSendVerificationEmail.jsx中创建store后立即执行sessionStorage.setItem，此时form的所有字段都是初始的空字符串""，所以存入sessionStorage的全是空值，后续用户填写的表单内容根本没被存储进去。

2. 未响应式同步表单更新：
   SolidJS的createStore是响应式状态，但你没有监听form的变化来更新sessionStorage。当用户填写表单修改form的值时，这些新值并没有同步到sessionStorage中，另一个文件自然拿不到有效数据。

修正方案 #

方案1：用createEffect监听表单变化，自动同步到sessionStorage #

修改useSendVerificationEmail.jsx，添加响应式监听，确保表单更新时同步存储：

import { createStore } from "solid-js/store";
import { createEffect } from "solid-js";

const [form, setForm] = createStore({
  firstName: "",
  lastName: "",
  email: "",
  password: "",
  gender: "",
});

// 监听form的所有变化，同步到sessionStorage
createEffect(() => {
  sessionStorage.setItem("firstName", form.firstName);
  sessionStorage.setItem("lastName", form.lastName);
  sessionStorage.setItem("email", form.email);
  sessionStorage.setItem("password", form.password);
  sessionStorage.setItem("gender", form.gender);
});

方案2：在表单提交时再存储数据（更合理，避免不必要的存储更新） #

如果你的场景是表单提交后才需要存储数据，建议在提交操作中执行存储，而不是实时监听：

import { createStore } from "solid-js/store";

const [form, setForm] = createStore({
  firstName: "",
  lastName: "",
  email: "",
  password: "",
  gender: "",
});

// 假设这是你的表单提交函数
const handleSubmit = () => {
  // 先执行表单验证等前置逻辑
  // ...

  // 提交时将表单数据存储到sessionStorage
  sessionStorage.setItem("firstName", form.firstName);
  sessionStorage.setItem("lastName", form.lastName);
  sessionStorage.setItem("email", form.email);
  sessionStorage.setItem("password", form.password);
  sessionStorage.setItem("gender", form.gender);

  // 后续的发送验证邮件逻辑
  // ...
};

这样修改后，useResendEmail.jsx中通过sessionStorage.getItem就能拿到表单填写后的真实数据了。

内容的提问来源于stack exchange，提问作者Goune Kenfack