0

我有一个问题，没有找到解决方案。

我想在我的 localStorage 添加多个记录。因此，如果我输入 firstname、lastname 和 id，然后单击保存，它在我的 localStorage 中，但如果我输入另一个，旧条目将丢失。每次调用 setItem 时，我都会在另一个线程中读取其覆盖的 bc，因此最后一个获胜。它说例如使用不同的密钥（lastname1，lastname2，...）。但我只想要一个列名（如在 MySQL 中）。是否可以存储在 localStorage 中，例如：

在此处输入图像描述 ?

到目前为止我的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="text" placeholder="First Name" id="fName" class="form-control" name="fName">
<input type="text" placeholder="Last Name" id="lName" class="form-control" name="lName">
<input type="text" placeholder="Member Id" id="mId" class="form-control" name="mId">
<button type="button" class="btn btn-default" id="save">Save</button>
<div class="container">
<table class="table table-striped" id="dataTable">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Member Id</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script type="text/javascript">
    function MemberInfo(fName,lName,memberId){
        this.FirstName=fName;
        this.LastName=lName;
        this.MemberId=memberId;
    }

    $('#save').click(function () {
        $("#dataTable").find('tbody')
            .append($('<tr>')
            .append($('<td>')
            .text($('#fName').val()))
            .append($('<td>')
            .text($('#lName').val()))
            .append($('<td>')
            .text($('#mId').val()))
      );

      let angaben = { 
        firstname: $('#fName').val(),
        lastname: $('#lName').val(),
        memberid: $('#mId').val()
      }

      $('#fName').val('');
      $('#lName').val('');
      $('#mId').val('');

      localStorage.setItem("member-data", JSON.stringify(angaben));
  })
</script>
</body>
</html>

非常感谢您的阅读！

4

2 回答 2

2

  1. 从本地存储加载和解析 JSONmember-data或创建空数组（如果是null.

  2. 点击保存后：

    • 将新用户推送到memberData数组
    • member-data用字符串化memberData数组覆盖本地存储
...

let memberData = JSON.parse(localStorage.getItem("member-data")) || [];

$('#save').click(function () {
  ...
  memberData.push(angaben);
  localStorage.setItem("member-data", JSON.stringify(memberData));
});

jsFiddle 演示

于 2019-12-05T20:49:32.107 回答
2

最好创建一个集合并将其存储在 localStorage 中。

例如。

let angaben = { 
    firstname: $('#fName').val(),
    lastname: $('#lName').val(),
    memberid: $('#mId').val()
  }

  let localData = localStorage.getItem('member-data');
  if (localData) {
      localData = JSON.parse(localData);
  } else {
   localData = [];
  }
  localData.push(angaben)
  localStorage.setItem("member-data", JSON.stringify(localData));

  // you can retrieve the data using 
  // localStorage.getItem('member-data'); and  parse it and iterate the array to render your table..
于 2019-12-05T20:39:39.047 回答