如何从 sessionStorage 将表单数据临时存储在用户的计算机上？

Question

我在我的solid-js 应用程序中创建了一个注册表单。 我希望在提交表单后，输入的值会从表单的输入字段中消失，但会暂时保留在用户的浏览器上（直到计算机关闭），以便能够获取这些值稍后在其他代码文件中。 为此，我因此决定使用 sessionStorage 并编写以下代码：

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

    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)

为了在其他文件中使用这些值，我这样做：

    const firstName = sessionStorage.getItem('firstName')
    const lastName = sessionStorage.getItem('lastName')
    const email = sessionStorage.getItem('email')
    const password = sessionStorage.getItem('password')
    const gender = sessionStorage.getItem('gender')

因为我认为由于这些值保存在用户的计算机上，因此可以直接访问这些变量的值。 但是指定键的值不会被 sessionStorage 返回。 我查看了这个stackoverflow问题，也查看了这个问题，但什么也没有。 谢谢！

Answer 1

您没有表单域和本地存储之间的粘合代码。 这是一个使用信号的简单示例，但您可以将其更新为使用商店：

import { render } from "solid-js/web";
import { createSignal, onMount } from "solid-js";

function App() {
  let ref: HTMLInputElement | undefined;

  const [val, setVal] = createSignal();

  const handleInput = (event: any) => {
    if (event) {
      sessionStorage.setItem('some-value', event.target.value);
    }
  };

  onMount(() => {
    const someValue = sessionStorage.getItem("some-value");
    setVal(someValue);
  });

  return (
    <div>
      <input value={val()} type="text" ref={ref} onInput={handleInput} />
    </div>
  );
}

render(() => <App />, document.getElementById("app")!);

我们使用onMount钩子恢复存储的值，该钩子在元素渲染后运行。

每当使用onInput处理程序更新输入字段时，我们都会存储新值。 与 React 不同，Solid 保持接近 HTML 标准并且不使用onChange 。