LocalStorage 不更新然后存储新值答案

【问题标题】：LocalStorage not updating and then storing new valuesLocalStorage 不更新然后存储新值
【发布时间】：2019-12-31 22:15:26
【问题描述】：

我的目标是构建一个包含文本和数字的大型数据数组，并且文本是从预先选择的名称数组（名字和姓氏）中随机选择的。函数 start() 通过按钮激活。

var malenames = ["John", "Bob", "Jim","Tim","Skylar","Zach","Jacob"];
var maleLast = ["J.","M.","B.","D.","W."];
var males = new Array();
males[0] = new Array("Placeholder","Placeholder",18);
males[1] = new Array("Placeholder","Placeholder",18);
males[2] = new Array("Placeholder","Placeholder",18);
males[3] = new Array("Placeholder","Placeholder",18);
males[4] = new Array("Placeholder","Placeholder",18);
males[5] = new Array("Placeholder","Placeholder",18);
males[6] = new Array("Placeholder","Placeholder",18);
males[7] = new Array("Placeholder","Placeholder",18);
males[8] = new Array("Placeholder","Placeholder",18);
males[9] = new Array("Placeholder","Placeholder",18);




function start() {
localStorage.setItem("random", Math.floor((Math.random()*(100-0))));
span.textContent = localStorage.getItem("random");


var i;
var j;
for (i=0; i < males.length; i++) {
males[i][0] = malenames[Math.floor(Math.random()*malenames.length)];
localStorage.setItem("males", JSON.stringify(males));
}

for (j=0; j<males.length; j++) {
males[j][1] = maleLast[Math.floor(Math.random()*maleLast.length)];
localStorage.setItem("males", JSON.stringify(males));
}



firstN.textContent = males[0][0];
lastN.textContent = males[0][1];
age.textContent = males[0][2];

}

此代码成功随机化，然后将名字和姓氏保存到 localStorage 的数组中。但是，我想通过每隔这么多秒向它添加一个值来修改计时器上的数字 18。

setInterval(function(){

var k;

for(k=0;k<males.length;k++){

males[k][2]++;
localStorage.setItem("males",JSON.stringify(males));


}
age.innerHTML = males[0][2];

}, 3000);

一切正常，一切都存储到 localStorage 中，直到我刷新页面。当我刷新页面时，localStorage 数组仍然正确，直到出现间隔。发生这种情况时，数组会刷新回 [Placeholder, Placeholder, 18]。我很好奇为什么当我只尝试在每个间隔添加到年龄变量时代码会这样做。我很乐意接受反馈和解释以理解这一点。谢谢。

【问题讨论】：

开发代码时需要使用更多的逻辑。 localStorage.setItem("males",JSON.stringify(males)); 在循环内？为什么？我想我们应该首先询问您真正想要做什么，这样我们才能向您展示一种更合乎逻辑的方法。
@StackSlave 好吧，您指出的事情似乎不是我最大的问题，因为它在存储然后显示名称时按原样工作，所以您的观点似乎与我的更大问题。我的问题是处理 setInterval 部分。当 setInterval 代码在浏览器刷新后激活时，“males”数组中的 localStorage 数据会重新启动为默认的 [Placeholder, Placeholder, 18]，但其他情况下会正常工作（不刷新）。
当你重新运行你的混乱时，看起来你的男性不是基于 localStorage。 var males = localStorage.males; if(!males){ /* run your start code */ }.
@StackSlave 为什么这个网站上的每个人都这么自命不凡，怎么这么糟糕？ lmao 无论如何，你是不正确的，因为如果是这样的话，当我删除 setInterval 代码时它不会保存名称。当我删除 setInterval 代码时，即使在刷新浏览器后，名称也完美地存储在 localStorage 中。所以很明显 setInterval 代码有问题。

标签： javascript html arrays json local-storage

【解决方案1】：

也许你真的想做一些类似的事情：

function shuffle(a){
  a.sort(function(b, c){
    return 0.5 - Math.random();
  });
}
function RandomPeople(lastNameArray, firstNameArray){
  var t = this;
  this.lastNames; this.firstNames;
  this.make = function(){
    this.lastNames = lastNameArray.slice(); this.firstNames = firstNameArray.slice();
    this.people = []; shuffle(this.firstNames);
    this.firstNames.forEach(function(n){
      t.people.push([t.lastNames[Math.floor(Math.random()*t.lastNames.length)], n, 18]);
    });
    return this;
  }
  this.grab = function(){
    if(localStorage.people){
      return JSON.parse(localStorage.people);
    }
    return false;
  }
  this.save = function(){
    localStorage.people = JSON.stringify(this.people);
    return this;
  }
}
var men = new RandomPeople(['J.', 'M.', 'B.', 'D.', 'W.'], ['John', 'Bob', 'Jim', 'Tim', 'Skylar', 'Zach', 'Jacob']);
var peps = men.grab();
if(!peps){
  men.make(); peps[5][2] += 2; men.save(); peps = men.people;
}
console.log(peps);

【讨论】：