localStorage上的变量

Question

嗨，我想问一下如何在localStorage中存储数据。

我的表格上有三个部分。第一部分是一个地方，我放了多少个蜂巢，等得到一个人，然后js计算每个人应该付多少钱。第二部分是输出，其中显示了计算结果。

第三部分是我获得摘要的部分，它显示了所有用户之前的内容的总和。在pc崩溃的情况下，我想记住这些数据，例如：

在撞车之前，假设两个人付了钱，汇总是: 20只蜜蜂的家庭，蜂场的数量: 2。

重新启动后，我需要找回我的摘要，我添加了新的人员，现在我有摘要，例如40，3

从第150行到第164行，它计算汇总(我将值推送到arr并减少它)

在第169行，我将它注入HTML文档。

接下来，我将汇总变量添加到localStorage中，这是一个创建的条件(如果div中没有子元素，则注入html代码和变量)

不幸的是，当我关闭窗口并再次打开时，我没有任何摘要。

项目：

let beesSumTotal = sumaRodzin.reduce((a, b) => {
   return a + b
 }, 0);
 let hivesSumTotal = hivesTotal.reduce((a, b) => {
   return a + b
 }, 0);
 let moenySumTotal = moenyTotal.reduce((a, b) => {
   return a + b
 }, 0);
 
 let peopleSumTotal = peopleTotal.length;

 outPut_ileWplat.value = peopleSumTotal;
 
 outPut_two.innerHTML = `<p>Rodzin łącznie: <br> <span class="display-2">${beesSumTotal}</span></p> <p>Pasiek łącznie:<br> <span class="display-2"> ${hivesSumTotal}</p> <p>Wpłaciło osób:<br> <span class="display-2">${peopleSumTotal}</p> <p>Zebrano:<br><span class="display-1"> ${moenySumTotal}</span> zł <p> <p class="small">raport składek</b> / ${dataWystawienia} / ${czasWystawienia}`
 
 
   window.localStorage.setItem("howManyPeople",  JSON.stringify(peopleSumTotal));
   window.localStorage.setItem("howManyHives", JSON.stringify(hivesSumTotal));
   window.localStorage.setItem("howManyBees", JSON.stringify(beesSumTotal));
   window.localStorage.setItem("howMuchMoney", JSON.stringify(moenySumTotal ));
 

    
 if (outPut_two.children.length === 0) {

   outPut_two.innerHTML = `<p>Rodzin łącznie: <br> <span class="display-2">${window.localStorage.getItem('howManyBees')}</span></p> <p>Pasiek łącznie:<br> <span class="display-2"> ${window.localStorage.getItem("howManyHives")}</p> <p>Wpłaciło osób:<br> <span class="display-2">${window.localStorage.getItem("howManyPeople")}</p> <p>Zebrano:<br><span class="display-1"> ${window.localStorage.geItem("howMuchMoney")}</span> zł <p> <p class="small">raport składek</b> / ${dataWystawienia} / ${czasWystawienia}

screen of project

https://jsfiddle.net/t4w75x0c/

Answer 1

如果使用localStorage.setItem，还必须使用localStorage.getItem来检索值。一个简化的例子：

保存

 localStorage.setItem("howManyPeople",  JSON.stringify(peopleSumTotal));

加载

 outPut_two.innerHTML = "total: 0"

 let stored = localStorage.getItem("howManyPeople");
 if(stored) {
     let peopleSumTotal = JSON.parse(stored);
     outPut_two.innerHTML = "total: " + peopleSumTotal
 }