Vue.js中如何利用localStorage保持井字棋棋盘刷新后状态不变？

要实现刷新后保留棋盘上X/O的位置和当前轮到哪个玩家，只需要把**棋盘状态（table）和当前玩家（player）**也存入localStorage，并在页面加载时恢复即可。具体修改如下：

关键修改点 #

• 监听table和player的变化，实时同步到localStorage
• 在组件挂载时，从localStorage读取并恢复这两个状态
• 重置游戏时，同时清空localStorage中对应的状态

修改后的完整代码 #

import { ref, computed, watch, onMounted } from "vue";

const player = ref("X");
const table = ref([
  ["", "", ""],
  ["", "", ""],
  ["", "", ""],
]);

const CalculateWinner = (squares) => {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
};

const winner = computed(() => CalculateWinner(table.value.flat()));

const Move = (x, y) => {
  if (winner.value) return;
  if (table.value[x][y] !== "") return;

  table.value[x][y] = player.value;
  player.value = player.value === "X" ? "O" : "X";
};

const Reset = () => {
  table.value = [
    ["", "", ""],
    ["", "", ""],
    ["", "", ""],
  ];
  player.value = "X";
  // 重置时清空localStorage中的游戏状态
  localStorage.removeItem("ticTacToeTable");
  localStorage.removeItem("ticTacToePlayer");
};

const history = ref([]);
watch(winner, (current, previous) => {
  if (current && !previous) {
    history.value.push(current);
    localStorage.setItem("history", JSON.stringify(history.value));
  }
});

// 监听棋盘和玩家状态变化，实时保存到localStorage
watch([table, player], () => {
  localStorage.setItem("ticTacToeTable", JSON.stringify(table.value));
  localStorage.setItem("ticTacToePlayer", player.value);
}, { deep: true }); // 因为table是二维数组，需要开启深度监听

onMounted(() => {
  // 恢复获胜历史
  history.value = JSON.parse(localStorage.getItem("history")) ?? [];
  // 恢复棋盘状态
  const savedTable = localStorage.getItem("ticTacToeTable");
  if (savedTable) {
    table.value = JSON.parse(savedTable);
  }
  // 恢复当前玩家
  const savedPlayer = localStorage.getItem("ticTacToePlayer");
  if (savedPlayer) {
    player.value = savedPlayer;
  }
});

代码解释 #

1. 状态监听：使用watch同时监听table和player，开启deep: true确保二维数组的变化能被捕获，每次变化时将它们序列化为JSON字符串存入localStorage。
2. 状态恢复：在onMounted钩子中，读取localStorage中保存的棋盘和玩家状态，解析后赋值给对应的ref变量，没有保存数据时使用默认值。
3. 重置逻辑：调用Reset时，除了重置内存中的状态，还要删除localStorage里的对应条目，避免刷新后又回到旧状态。

内容的提问来源于stack exchange，提问作者Andrew