时间戳

首页 > 解决方案 > 为什么浏览器看不到本地存储元素的值？

javascript - 为什么浏览器看不到本地存储元素的值？

问题描述

我正在使用 React JS 创建一个简单的俄罗斯方块游戏。除了 App.js 之外，我的主要组件是 Tetris.js 功能组件。在 useEffect() 中，我使用本地存储存储舞台或当前播放器 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，这意味着用户已经点击了按钮并愿意继续游戏时，什么都没有发生。从本地存储中检索到的元素是空的，例如舞台没有元素 - JSON.parse(localStorage.getItem("stageStored")) 给了我空的舞台，没有四联骨牌。为什么会这样？是关闭浏览器还是关闭浏览器的卡片刷新localStorage？谢谢。

标签： javascriptreactjscookiesbrowser

解决方案

将您的localStorage.setItem()呼叫从 useEffect 块中移出。对于每次应用程序刷新，调用setItemuseEffect 会覆盖实际的存储值。

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

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

每当您像下面这样更新状态时，请立即设置 localStorage 值：

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

例如，我在您的代码中对您的pastebindropTime代码中的值进行了此更改。您也可以对其他值执行相同的操作。

推荐阅读