gpt4 book ai didi

javascript - 使用 JS 将值附加到新数组

转载 作者:行者123 更新时间:2023-11-30 14:21:05 26 4
gpt4 key购买 nike

我正在尝试使用 HTML、JS 和本地存储构建一个表单(更多用于个人学习)以:

  1. 接受用户的输入
  2. 显示用户的输入
  3. 将数据存储在本地存储
  4. 为用户提供一个选项,是划掉某个项目还是划掉所有内容

问题:

  • 本地存储总是存储最新输入的值而不是整个数组。由于某种原因,推送数组没有附加所有值。我错过了什么?
  • 删除线同时适用于所有选项,但不适用于每个选项。每个选项的解决方法是什么?

function display(){
var master_list = [];
var data = document.getElementById('to_do').value;
master_list.push(data);
document.getElementById('form_data').innerHTML += "<li>"+ data +"</li>";
console.log("data is "+ data);
console.log("master list is "+ master_list);
// storeData(master_list);
}

function remove(){
var list = document.getElementById('form_data').innerText;
// console.log("the data is " + list);
document.getElementById('form_data').innerHTML = list.strike();

}

function storeData(master_list){
localStorage.setItem("master_list", JSON.stringify(master_list));

}
 <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>The To-do Application</title>
<script src="to_do_app.js" charset="utf-8"></script>
</head>

<body>
<h1>Welcome to the To-Do application</h1>
<label>Enter your to-do item: </label>
<input type="text" id="to_do" placeholder="eg: groceries">
<button onclick=display()> Add </button>
<h3>Added Items are:</h3>
<div id="form_data"></div>
<br>
<button onclick=remove()> Clear All </button>
<!-- <h6>Note: To remove please click on the item</h6> -->
</body>

</html>



最佳答案

您必须使用 localStorage.getItem 检查 master_list 项目是否已存在于 localStorage 中(如果请求的项目不存在,它将实际返回 null)

const storeData= master_list => {
let item = localStorage.getItem("master_list");
if ( ! item ) {
localStorage.setItem("master_list", master_list);
return;
}
item = JSON.parse("master_list");
item.concat(master_list); // or master_list.concat(item) depending on your needs
localStorage.setItem("master_list", item);
};

关于javascript - 使用 JS 将值附加到新数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52737354/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com