Javascript 为什么浏览器看不到本地存储元素'；价值观

我正在使用React JS创建一个简单的俄罗斯方块游戏。除了App.js之外，我的主要组件是一个Tetris.js功能组件。在useffect（）中，我使用本地存储来存储stage或current player tetromino之类的组件。播放时，可以在控制台中检索数据，并且数据不为空

useEffect(() => {
    localStorage.setItem("dropTimeStored", JSON.stringify(dropTime));
    localStorage.setItem("stageStored", JSON.stringify(stage));
    localStorage.setItem("playerStored", JSON.stringify(stage));
    localStorage.setItem("rowsClearedStored", JSON.stringify(rowsCleared));
    localStorage.setItem("scoreStored", JSON.stringify(score));
    localStorage.setItem("rowsStored", JSON.stringify(rows));
    localStorage.setItem("levelStored", JSON.stringify(level));
    localStorage.setItem("gameOverStored", JSON.stringify(gameOver));
}, [dropTime, stage, player, rowsCleared, score, rows, level, gameOver])

我想让用户在即时关闭浏览器后继续游戏。这就是为什么在启动游戏功能时我会这样做：

const startGame = () => {
    console.log(loadLocalStorage);
    if (loadLocalStorage){
        setDropTime(JSON.parse(localStorage.getItem("dropTimeStored")));
        setStage(JSON.parse(localStorage.getItem("stageStored")));
        player = JSON.parse(localStorage.getItem("playerStored"));
        rowsCleared = JSON.parse(localStorage.getItem("rowsClearedStored"));
        setScore(JSON.parse(localStorage.getItem("scoreStored")));
        setRows(JSON.parse(localStorage.getItem("rowsStored")));
        setLevel(JSON.parse(localStorage.getItem("levelStored")));
        setGameOver(JSON.parse(localStorage.getItem("gameOverStored")));
    } else {
        localStorage.clear();
        setStage(createStage());
        setDropTime(1000);
        resetPlayer();
        setGameOver(false);
        setScore(0);
        setRows(0);
        setLevel(0);
    }        
}

---

但是，虽然“loadLocalStorage”标志设置为True，这意味着用户已单击按钮并愿意继续游戏，但什么也没有发生。从本地存储检索到的元素是空的，例如stage没有元素-JSON.parse（localStorage.getItem（“stageStored”））给我空的stage，没有tetrominos。为什么会这样？关闭浏览器还是关闭浏览器的卡刷新本地存储？谢谢。

将您的

localStorage.setItem（）调用从useffect块中移出。对于每次应用程序刷新，在useEffect中调用
setItem
将覆盖实际存储值

为此，请在更新状态时设置本地存储数据。
例如，编写一个通用方法来更新localStorage数据，如下所示：

    const updateLocalStorage = (key, value) => {
      localStorage.setItem(key, value);
    }

无论何时更新如下状态，都要立即设置localStorage值：

const dropTime = 1000 / (level + 1) + 200;
setDropTime(dropTime);
updateLocalStorage('dropTimeStored', dropTime);

例如，我在代码中对代码中的
dropTime
值进行了此更改。您也可以对其他值执行相同的操作
 理想情况下，关闭浏览器选项卡时刷新的是会话存储。重新打开应用程序时，LocalStorage中的数据可用吗？请检查浏览器中的应用程序选项卡。在游戏期间，当我在控制台JSON.parse（localStorage.getItem（“stageStored”））中检查时，我可以看到数组中的tetrominos。在重新加载浏览器和应用程序后，在执行上述命令时，我的stage-array的每个单元格都是空的，尽管浏览器关闭时主板上有块。您提供的代码第4行有一个输入错误：localStorage.setItem（“playerStored”，JSON.stringify（stage））；您可以分享一下如何在组件中初始化localStorage对象吗？还要检查数据是否存在于开发人员工具中“应用程序”选项卡的浏览器存储中。我没有初始化localStorage对象。这是我使用它的两个地方。谢谢，我明白了。在开始游戏功能中可以保留检索数据吗？是的，检索数据可以保持与您希望从以前的状态继续游戏的状态相同。我设法从本地存储中检索数据。存储状态已正确加载，但在useInterval Hook-1000ms中定义的时间后它会消失。也许您在某个地方清除了存储，在清除值的地方调试，您可能会找到原因。