如何使用javascript中的sessionStorage从代码文件中访问存储在浏览器上的值​？

Question

我已经将应用程序的一种形式从sessionStorage返回的数据存储在浏览器上。但是，我不能从我的项目中的另一个代码文件访问存储的值​​，这不会给我带来错误。我希望只要指定保存这些值的变量的名称，​​就可以在任何地方访问这些值。下面是我的useSendVerificationEmail.jsx文件中的代码，在该文件中，我声明并将值​​分配给存储在浏览器上的变量：

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

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);

下面是我的useResendEmail.jsx文件中的代码，我试图访问这些保存的值，​​，但我不能：

import { createSignal } from "solid-js";

export default function useResendEmail() {
  // ... code ...

  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");

  // ... more code ...
}

我想澄清的是，这些常量没有在文件useSendVerificationEmail.jsx中声明。我原以为这会起作用，但我不明白它为什么要这么做。有谁能给我解释一下我的错误，谢谢！

Answer 1

如果在同一个选项卡上加载任何js文件，则会话存储应该在它们之间工作。

这里是一个代码框，显示了所以https://codesandbox.io/s/nice-forest-7g6ulz?file=/src/LoadSessionStorage.jsx

SetSessionStorage.jsx

import { useRef } from "react";
export const SetSessionStorage = (props) => {
  const userInput = useRef(null);
  const onUserInput = () => {
    // Whenever the usre input changes, we set the new value in the sessionStorage
    sessionStorage.setItem("user", userInput.current.value);
  };
  return (
    <div>
      <div>SetSessionStorage</div>
      <input ref={userInput} type="text" onChange={onUserInput} />
    </div>
  );
};

LoadSessionStorage

import { useState, useEffect } from "react";
export const LoadSessionStorage = (props) => {
  const [user, setUser] = useState(sessionStorage.getItem("user"));
  useEffect(() => {
    // In this example we don't have any framework to notify the update of the sessionStorage
    // so we just get the value from sessionStorage every 500ms
    const id = setInterval(() => {
      setUser(sessionStorage.getItem("user"));
    }, 500);
    return () => clearInterval(id);
  }, []);
  return (
    <div>
      <div>LoadSessionStorage</div>
      <div>User: {user}</div>
    </div>
  );
};

App.jsx

import { SetSessionStorage } from "./SetSessionStorage";
import { LoadSessionStorage } from "./LoadSessionStorage";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <SetSessionStorage />
      <LoadSessionStorage />
    </div>
  );
}

在您的例子中，我看到了一些可能性(如果您能够提供如何设置sessionStorage和如何使用useResendEmail，它可能有助于缩小问题范围)：

• 您从未设置sessionStorage (或在设置sessionStorage后不久将其重置为空)，但在sessionStorage更新

之后，userResendEmail不会被调用

要检查是否是第一种情况，可以在Chrome调试器中签入Application => Session Storage => your origin并查看SessionStorage的当前值(您可能需要单击过滤器旁边的刷新图标，以确保具有最新的状态)。

在第二个场景中，很可能在呈现方法(或功能组件体)中调用useResendEmail()。但是，由于该组件的状态/支持没有改变，所以组件不会被重命名，因此不会调用useResendEmail。正如您在我的示例中所注意到的，因为我没有使用redux或任何会通知我的LoadSessionStorage sessionStorage已经更新的东西，所以我必须定期读取sessionStorage以获得呈现的更新。

虽然setInterval绝对不是解决这个问题的正确方法，但是在更新useResendEmail时，您需要通知调用useResendEmail的组件重命名(使用像redux这样的存储，或者solid.js有一些功能来指示从一个组件更改到另一个组件？)

Answer 2

会话存储API用于存储与会话相关的数据。一旦会话结束，它们将被清除。如果您试图从另一个窗口或选项卡访问设置值，则可能无法获得它们。

只读sessionStorage属性访问当前来源的会话存储对象.sessionStorage类似于localStorage；区别在于，虽然localStorage中的数据不会过期，但是当页面会话结束时，sessionStorage中的数据将被清除。

每当在浏览器中的特定选项卡中加载文档时，

• 就会创建一个唯一的页面会话，并将其分配给该特定选项卡。该页面会话仅对该特定选项卡有效。只要选项卡或浏览器打开，页面会话就会持续，并且在重新加载页面并在新的选项卡或窗口中restores.
• Opening页面时，将创建一个具有顶级浏览上下文值的新会话，与会话cookie的工作方式不同。使用相同的tab/window.
• Duplicating打开多个选项卡/窗口的
• 为每个

创建sessionStorage，一个选项卡将选项卡的sessionStorage复制到新的选项卡中。关闭选项卡/窗口的

• 结束会话并清除sessionStorage.

中的对象

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

尝试使用本地存储来存储值。

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

function App() {
  const [val, setVal] = createSignal('');

  const handleInput = (event) => {
    if (event) {
      // Update stored value when input value changes
      localStorage.setItem('some-value', event.target.value);
    }
  };

  onMount(() => {
    const storedValue = localStorage.getItem("some-value") || '';

    // Set previously stored value back upon mounting the element
    setVal(storedValue);
  });

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

render(App, document.getElementById("app"));

逻辑很简单，只要用户更新输入值，我们就将输入值存储到本地存储中。当页面加载并将其分配给输入值时，我们从本地存储中获取存储的值。检查代码中的注释，以确定确切的位置。

查看现场演示的链接：

https://playground.solidjs.com/?hash=1883583533&version=1.4.1