个人中心
gpt4 book ai didi

javaScript 问题 - setItem 正在覆盖本地存储

转载 作者：行者123 更新时间：2023-12-01 00:04:04 27 4
gpt4 key购买 nike

我的团队正在进行的一个小型学校项目遇到了问题。

每当我将输入提交到本地存储时，它都会覆盖以前的本地存储项目。这个想法是稍后通过使用复选框等“合并”成员输入与任务输入。

我希望能够从本地存储中列出大量名称和任务，但正如您所见，现在不可能，而且我有点卡住了

这是我的第一篇文章，对于给您带来的任何不便，我深表歉意提前致谢!

    <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="css/testStyle.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <h1>Arbeidskrav webprojekt</h1>

        <fieldset>
            <legend>Oppgavebeskrivelse</legend>
            <input id="firstValue" type="text" placeholder="Oppgave">
            <button id="firstBtn" type="button">Legg til oppgave</button>
        </fieldset>

        <fieldset>
            <legend>Medlemsnavn</legend>
            <input id="secondValue" type="text" placeholder="Medlemsnavn">
            <button id="secondBtn" type="button">Legg til medlem</button>
        </fieldset>

        <fieldset>
            <legend>Arbeidsoppgaver</legend>
            <div id="taskOutput"></div>
        </fieldset>

        <fieldset>
            <legend>Teammedlemmer</legend>
            <div id="teamOutput"></div>
        </fieldset>

        <fieldset>
            <legend>Fordelte arbeidsoppgaver</legend>
            <div id="combinedOutput"></div>
        </fieldset>

        <script type="text/javascript">
          const firstValue = document.getElementById("firstValue");
          const secondValue = document.getElementById("secondValue");

          const firstBtn = document.getElementById("firstBtn");
          const secondBtn = document.getElementById("secondBtn");

          const taskOutput = document.getElementById("taskOutput");
          const teamOutput = document.getElementById("teamOutput");
          const combinedOutput = document.getElementById("combinedOutput");


          firstBtn.onclick = function(){
              const keyOne = "task";
              const valueOne = firstValue.value;

              if(valueOne){
                  localStorage.setItem(keyOne, valueOne);
                  location.reload();
              }else{
                  alert("Enter a valid task");
              }
          };

          secondBtn.onclick = function(){
              const keyTwo = "name";
              const valueTwo = secondValue.value;

              if(valueTwo){
                  localStorage.setItem(keyTwo, valueTwo);
                  location.reload();
              }else{
                  alert("Enter a valid name");
              }
          };

          for(let i = 0; i < localStorage.length; i++){

              const key = localStorage.key(i);
              const value = localStorage.getItem(key);
              if(key == "task"){
                  taskOutput.innerHTML += `${value}<br>`;
              }else{
                  teamOutput.innerHTML += `${value}<br>`;
              }
          }
        </script>

    </body>
</html>

最佳答案

localStorage 以字符串格式存储数据，这意味着每次调用 setItem() 方法时，它都会覆盖之前的数据。

首先，您需要检查您的 localStorage 是否存在。
然后，如果该特定 localStorage 不存在，则使用 setItem() 方法创建该特定 localStorage。

现在，如果特定的 localStorage 已经存在，则使用方法 getItem() 并将 localStorage 存储在任何变量中。
然后，在上述变量中​​添加您想要添加到 localStorage 的新值。
之后，使用上面的变量来存储 localStorage，使用 setItem() 方法。

检查下面的代码，您可以执行类似的操作。

if(!localStorage.getItem('names')){
  localStorage.setItem('names', 'John Doe;');
  console.log(localStorage.getItem('names'));
}
else{
  let namesStr = localStorage.getItem('names');
  
  let newName = "Katy Clark;";
  
  namesStr += newName;
  localStorage.setItem('names', namesStr);
  console.log(localStorage.getItem('names'));
}

I am using delimiter ; so that I can find out a different name. You can use any delimiter accordingly

关于javaScript 问题 - setItem 正在覆盖本地存储，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60505685/

27 4 0
文章推荐： JavaScript - 将 UTF8 编码/解码为十六进制以及十六进制为 UTF8
文章推荐： javascript - Json - 创建一个自动递增的 ID 列
文章推荐： javascript - 本地存储的困境
文章推荐： Mysql销售表按客户分组按月列显示透视查询
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com