javascript - 我对 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)
找到所有值,但我找不到将它们返回原处的方法。有人有想法吗?谢谢 !
解决方案
您正在存储一个数组。您需要将每个数组元素分配给不同的 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];
}
推荐阅读
- unity3d - 在 Unity 中访问 Watson 意图
- php - PHP Xpath:匹配 HTML 片段中的根节点
- ruby - Chef - Block not being executed even tho its notified?
- javascript - 如何在反应中正确传递服务器错误响应?
- python - Using QPainter and paintEvent to draw circles on a Pixmap that is contained in a QLabel in PYQT5
- r - 使用二级索引在r中显示数据表
- c++ - gRPC WaitForConnected 总是返回 true
- mysql - MySQL对于给定键的所有出现的一列中的值的相对排名
- ios - 使 UITextView 高度动态,约束乘数问题
- keras - 在 Keras 2.2.2 fit_generator 中将 batch_size 从“str”转换为“int”时出错