如何使用 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

Session存儲API用於存儲session相關數據。 一旦 session 結束，它們就會被清除。 如果您嘗試從另一個 window 或選項卡訪問設置值，您可能無法獲取它們。

只讀 sessionStorage 屬性訪問當前來源的 session 存儲 object。 sessionStorage 類似於 localStorage； 不同之處在於，localStorage 中的數據不會過期，而 sessionStorage 中的數據會在頁面 session 結束時被清除。

• 每當在瀏覽器的特定選項卡中加載文檔時，都會創建一個唯一的頁面 session 並將其分配給該特定選項卡。 該頁面 session 僅對該特定選項卡有效。
• 只要選項卡或瀏覽器打開，頁面 session 就會持續存在，並且在頁面重新加載和恢復后仍然存在。
• 在新選項卡或 window 中打開頁面會創建一個新的 session，其值為頂級瀏覽上下文，這與 session cookies 的工作方式不同。
• 使用相同的 URL 打開多個選項卡/窗口會為每個選項卡/窗口創建 sessionStorage。
• 復制選項卡會將選項卡的 sessionStorage 復制到新選項卡中。
• 關閉選項卡/窗口會結束 session 並清除 sessionStorage 中的對象。

https://developer.mozilla.org/zh-CN/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

Answer 2

Session 存儲應該在任何 js 文件之間工作，如果它們被加載到同一個選項卡上。

這是一個顯示https://codesandbox.io/s/nice-forest-7g6ulz?file=/src/LoadSessionStorage.jsx的代碼框：

設置會話存儲.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>
  );
};

加載會話存儲

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

應用程序.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 的當前值（您可能需要單擊 Filter 旁邊的刷新圖標以確保擁有最新的狀態）。

在第二種情況下，很可能在渲染方法（或功能組件主體）中調用了useResendEmail() )。 但是由於該組件的狀態/道具沒有更改，因此不會重新渲染組件，因此不會調用useResendEmail 。 正如您在我的示例中注意到的那樣，因為我沒有使用 redux 或任何會通知我的 LoadSessionStorage sessionStorage已更新的東西，所以我必須定期讀取sessionStorage以獲取呈現的更新。

雖然setInterval絕對不是解決問題的正確方法，但您需要通知調用useResendEmail的組件在更新 sessionStorage 時重新呈現（使用 redux 之類的存儲，或者 solid.js 可能具有一些功能來指示組件的某些更改另一個？）。