首页 > 解决方案 > 我对 localStorage 有误解

问题描述

我目前正在开始学习如何使用 javascript,但我遇到了一个小问题。我正在制作一个“查找随机数”的迷你游戏,我正在尝试实现一个localStorage保存状态,让我在关闭游戏时保持游戏状态,但没有成功。这是我卡住的 JS 部分。

let Rndm = Math.floor(Math.random() * 100) + 1;

var tentatives = document.querySelector('.tentatives');
var resultat = document.querySelector('.resultat');
var plusoumoins = document.querySelector('.plusoumoins');
var valider = document.querySelector('.valider');
var essai = document.querySelector('.essai');

var nmbrmax = 1000;
var nmbrtent = 1;

let j1 = document.getElementById("j1");
let j2 = document.getElementById("j2");
var joueur1 = document.getElementById("joueur1");
var joueur2 = document.getElementById("joueur2");
let nomsjoueurs = document.getElementById("nomsjoueurs");
let tour = document.getElementById("tour");

var playerTurn = 0;
const partiesauvee = []

function sauvegarder() {
    partiesauvee.push(tentatives.textContent);
    partiesauvee.push(resultat.textContent);
    partiesauvee.push(plusoumoins.textContent);
    partiesauvee.push(nmbrmax);
    partiesauvee.push(nmbrtent);
    partiesauvee.push(joueur1.value);
    partiesauvee.push(joueur2.value);
    
    localStorage.setItem('sauvegard', JSON.stringify(partiesauvee))
}

function refresh() {
    const partiesauvee = JSON.parse(localStorage.getItem('sauvegard'));
    var tentatives = JSON.parse(localStorage.getItem('sauvegard'));
    var resultat = JSON.parse(localStorage.getItem('sauvegard'));
    var plusoumoins = JSON.parse(localStorage.getItem('sauvegard'));

    var nmbrmax = localStorage.getItem('sauvegard');
    var nmbrtent = localStorage.getItem('sauvegard');

    var joueur1 = JSON.parse(localStorage.getItem('sauvegard'));
    var joueur2 = JSON.parse(localStorage.getItem('sauvegard'));
}

window.addEventListener('DOMContentLoaded', refresh);

激活该sauvegarder功能后,会console.log(localstorage)找到所有值,但我找不到将它们返回原处的方法。有人有想法吗?谢谢 !

标签: javascriptjsonlocal-storage

解决方案


您正在存储一个数组。您需要将每个数组元素分配给不同的 DOM 元素。

function refresh() {
  const storage = localStorage.getItem('sauvegard');
  if (!storage) { // nothing saved
    return;
  }
  const partiesauvee = JSON.parse(storage);
  tentatives.textContent = partiesauvee[0];
  resultat.textContent = partiesauvee[1];
  plusoumoins.textContent = partiesauvee[2];
  nmbrmax.textContent = partiesauvee[3];
  nmbrtent.textContent = partiesauvee[4];
  joueur1.textContent = partiesauvee[5];
  joueur2.textContent = partiesauvee[6];
}

推荐阅读