个人中心
gpt4 book ai didi

javascript - 在本地存储 JavaScript 中保存以前的提交

转载 作者：太空宇宙 更新时间：2023-11-04 09:36:58 24 4
gpt4 key购买 nike

我正在制作一个 JavaScript 程序。它使用 3 个输入框，然后将您在每个输入框中键入的内容显示到页面中。我正在使用本地存储重新打印以前的提交，但是当我使用 setItem() 时，它会覆盖所有以前的提交。我还能怎么做才能保留任何之前提交的内容？

我试图用我的代码创建一个 JSFiddle 来发送这篇文章，但是代码在 JSFiddle 的控制台中给出了错误。它在本地工作得很好。原始和完整注释的代码粘贴在下面。

注意: This post不是重复的，因为它处理的是 session 存储而不是本地存储。

代码:

 "use strict";

 // First we do a self-invoking function that contains everything - there will be nothing
 //  exposed to the global scope.
 (function() {
     var storageArray = [];
     window.onload = retrieve();

     function Credential(name, address, email) {
       this.name = name;
       this.address = address;
       this.email = email;
     }
     var button = document.getElementById("doit");
     button.onclick = function() {
       /*  This function will run when the user clicks on the
        *  Save button.  */

       //Step #1 - we get values from the form
       var name = document.getElementById("name").value;
       var address = document.getElementById("address").value;
       var email = document.getElementById("email").value;

       // Step #2 - you will create a new data object
       var data = {
         name, address, email
       };

       // Step #3 - call on writeRowtoPage() to write your new data object to the page
       writeRowToPage(data, output);
       // Step#4 - Store your object in localStorage (preserving data
       //          that's already in there from prior submissions!)
       storageArray.push(data);
       window.localStorage.setItem("storageArr", JSON.stringify(storageArray));
     }

     /* This function accepts two arguments -
            @dataObject: your data object representing a single
                      submission of the data form, which corresponds
                      to one row in the table
            @element:   the element on the page to which to write the output
    
            The function assembles a string of HTML, using the data from
            dataObject.  Once the string is complete, it is appended to the
            page using innerHTML.
         */
     function writeRowToPage(dataObject, element) {
       var s = "<div class=\"info\">";

       s += '<div class="nameDiv">';
       if (dataObject.name !== 'undefined') {
         s += dataObject.name;
       }
       s += '</div><div class="addrDiv">';
       if (dataObject.address !== 'undefined') {
         s += dataObject.address;
       }
       s += '</div><div class="emailDiv">';
       if (dataObject.email !== 'undefined') {
         s += dataObject.email;
       }
       s += '</div></div>';

       element.innerHTML += s;
     }


     /* Upon page load, look in localStorage for any existing data, create data objects from it, and write those data objects to the page using writeRowToPage().  */
     var credString = window.localStorage.getItem("storageArr");
     var credList = JSON.parse(credString);

     function retrieve() {
       for (var i = 0; i < credList.length; i++) {
         var newCred = new Credential(credList[i].name, credList[i].address, credList[i].email);
         storageArray.push(newCred);
         writeRowToPage(newCred, 'output');
       }
     }
   }


 )();
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333;
}
.button {
  border: 1px solid #888888;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  font-style: normal;
  height: 30px;
  width: 82px;
  line-height: 14px;
  padding: .5em;
  text-align: center;
  background-color: #614C26;
}
.button:hover {
  border: 2px solid #000;
}
label {
  display: inline-block;
  width: 5em;
}
.info div {
  display: inline-block;
  width: 10em;
}
.infoHead {
  font-weight: bold;
  border-bottom: 1px solid gray;
  width: 30em;
}
<!doctype html>
<html>

<head>

  <link rel="stylesheet" href="css/cscie3.css">
</head>

<body>
  <label for="name">Name</label>
  <input type="text" size="40" id="name">
  <br>
  <label for="address">Address</label>
  <input type="text" size="40" id="address">
  <br>
  <label for="email">Email</label>
  <input type="text" size="40" id="email">
  <br>
  <button id="doit" class="button">Save</button>

  <h2>My Records</h2>
  <div id="output">
    <div class="info infoHead">
      <div>Name</div>
      <div>Address</div>
      <div>Email</div>
    </div>
  </div>

  <script tyle="text/javascript" src="js/hw2b_v3.js"></script>
</body>

</html>

最佳答案

那是因为每次加载页面时，您都会获得新数组并在 localStorage 中设置新值。所以试试这个

"use strict";

// First we do a self-invoking function that contains everything - there will be nothing
//  exposed to the global scope.
(function(){
    var storageArray = localStorage["storageArr"] ? JSON.parse(localStorage["storageArr"]) : [];
    window.onload = retrieve();
    function Credential (name, address, email) {
      this.name = name;
      this.address = address;
      this.email = email;
    }
    var button = document.getElementById("doit");
    button.onclick = function(){
        /*  This function will run when the user clicks on the
         *  Save button.  */

        //Step #1 - we get values from the form
        var name = document.getElementById("name").value;
        var address = document.getElementById("address").value;
        var email = document.getElementById("email").value;

        // Step #2 - you will create a new data object
        var data = {name, address, email};

        // Step #3 - call on writeRowtoPage() to write your new data object to the page
        writeRowToPage(data, output);
        // Step#4 - Store your object in localStorage (preserving data
        //          that's already in there from prior submissions!)
        storageArray.push(data);
        window.localStorage.setItem("storageArr",JSON.stringify(storageArray));
    }

    /* This function accepts two arguments -
        @dataObject: your data object representing a single
                  submission of the data form, which corresponds
                  to one row in the table
        @element:   the element on the page to which to write the output

        The function assembles a string of HTML, using the data from
        dataObject.  Once the string is complete, it is appended to the
        page using innerHTML.
     */
    function writeRowToPage(dataObject, element) {
        var s = "<div class=\"info\">";

        s+='<div class="nameDiv">';
        if (dataObject.name !== 'undefined') {
            s+=dataObject.name;
        }
        s+= '</div><div class="addrDiv">';
        if (dataObject.address !== 'undefined') {
            s+=dataObject.address;
        }
        s+= '</div><div class="emailDiv">';
        if (dataObject.email !== 'undefined') {
            s+=dataObject.email;
        }
        s+= '</div></div>';

        element.innerHTML += s;
    }


    /* Upon page load, look in localStorage for any existing data, create data objects from it, and write those data objects to the page using writeRowToPage().  */
     function retrieve() {
    var localMemory = window.localStorage.getItem("localArr");
    var parsedLocalMemory = JSON.parse(localMemory);
    
    if (parsedLocalMemory != null){
        for (var i = 0; i < parsedLocalMemory.length; i++) {
            var nextPerson = new AddrBookEntry (parsedLocalMemory[i].name, parsedLocalMemory[i].addr, parsedLocalMemory[i].email);
            writeRowToPage(nextPerson, output);
        }
    }
}
}


)();

关于javascript - 在本地存储 JavaScript 中保存以前的提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40251632/

24 4 0
文章推荐： linux - shell脚本中for循环的迭代
文章推荐： linux - 如何在 bash 中添加自动完成 arcanist 命令
文章推荐： java - 在Java中运行Cucumber时修改CucumberOptions标签
文章推荐： java - 聆听 3 个手指的手势？
太空宇宙
个人简介

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

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