英文:
Saving data in the local storage
问题
我使用了HTML和JavaScript编写了一个简单的待办事项列表代码。但每次刷新代码时，列表都会被删除。我了解了本地存储的概念，但无论我如何尝试，都无法在我的代码中实现这个概念。以下是我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ToDo list</h1>
<div class="addNewWork">
<input type="text" placeholder="Enter new work">
<button>Enter</button>
</div>
<ul>
<li class="random">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");
function inputValueCheck() {
return input.value.length;
};
function addElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li)
input.value = "";
};
function mouseClickEvent() {
if (inputValueCheck() > 0) {
addElement();
};
};
function keypressEvent(event) {
if (inputValueCheck() > 0 && event.code === "Enter") {
addElement();
};
};
button.addEventListener("click", mouseClickEvent);
input.addEventListener("keypress", keypressEvent);
请有人演示如何将输入的数据保存到本地存储并将其作为代码中的列表标签访问，或者提供一些提示，以便我可以自己解决它？
这是我尝试的方式。我能够将数据保存到本地存储，但无法正确实现localStorage.getItem()方法。以下是我如何将数据保存到本地存储的方式。
var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");
var workItems = [];
function inputValueCheck() {
return input.value.length;
};
function saveDataInLocalStorage() {
workItems.push(input.value);
localStorage.setItem("items", JSON.stringify(workItems));
}
function addElement() {
saveDataInLocalStorage();
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li)
input.value = "";
};
function mouseClickEvent() {
if (inputValueCheck() > 0) {
addElement();
};
};
function keypressEvent(event) {
if (inputValueCheck() > 0 && event.code === "Enter") {
addElement();
};
};
button.addEventListener("click", mouseClickEvent);
input.addEventListener("keypress", keypressEvent);
希望这对你有所帮助。如果你需要更多的解释或指导，请随时告诉我。
英文:
I wrote a simple To do list code with html and java script. But every time I refresh the code the list are being deleted. I came to know about local storage. But no matter how much I try I cannot implement the concept in my code. Here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ToDo list</h1>
<div class="addNewWork">
<input type="text" placeholder="Enter new work">
<button>Enter</button>
</div>
<ul>
<li class="random">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");
function inputValueCheck() {
return input.value.length;
};
function addElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li)
input.value = "";
};
function mouseClickEvent() {
if (inputValueCheck() > 0) {
addElement();
};
};
function keypressEvent(event) {
if (inputValueCheck() > 0 && event.code === "Enter") {
addElement();
};
};
button.addEventListener("click", mouseClickEvent);
input.addEventListener("keypress", keypressEvent);
Can someone please demonstrate how to save the data from the input to localstorage and access it as a list tag in my code or just give some hints so that I can solve it myself?
Here is how I tried to do it. I was able to save the data to local storage but I couldn't able to implement the method localStorage.getItem() in the right way. Here is how I was able to save the data to local storage.
var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");
var workItems = [];
function inputValueCheck() {
return input.value.length;
};
function saveDataInLocalStorage() {
workItems.push(input.value);
localStorage.setItem("items", JSON.stringify(workItems));
}
function addElement() {
saveDataInLocalStorage();
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li)
input.value = "";
};
function mouseClickEvent() {
if (inputValueCheck() > 0) {
addElement();
};
};
function keypressEvent(event) {
if (inputValueCheck() > 0 && event.code === "Enter") {
addElement();
};
};
button.addEventListener("click", mouseClickEvent);
input.addEventListener("keypress", keypressEvent);
答案1
得分: 1
Sure, here's the translated code:
首先，将添加元素的函数分离出来。
function addElement () {
saveDataInLocalStorage();
addElementToDom(input.value);
input.value = "";
};
function addElementToDom(text) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(text));
ul.appendChild(li);
}
现在，您可以在页面加载时使用 'addElementToDom' 函数，将保存在本地存储中的待办事项添加到页面上，如下所示。
```javascript
const items = JSON.parse(localStorage.getItem("items"));
items.forEach(addElementToDom);
请注意，我已将 HTML 实体字符（例如 " 和 '）转换为它们的对应字符。
英文:
First seperate the add element function.
function addElement () {
saveDataInLocalStorage();
addElementToDom(input.value);
input.value = "";
};
function addElementToDom(text) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(text));
ul.appendChild(li)
}
Now you can use the 'addElementToDom' function on page load to add the to-do's saved in localstorage to the page like so.
const items = JSON.parse(localStorage.getItem("items"));
items.forEach(addElementToDom);
答案2
得分: 0
以下是您要翻译的代码部分：
let workItems = [];
if (JSON.parse(localStorage.getItem("items")) === null) {
localStorage.setItem("items", JSON.stringify(workItems));
}
function saveDataInLocalStorage() {
workItems = JSON.parse(localStorage.getItem("items"));
workItems.push(input.value);
localStorage.setItem("items", JSON.stringify(workItems));
}
请注意，我已将 HTML 实体引用（如 "）还原为原始的双引号。
英文:
let workItems=[];
if(JSON.parse(localStorage.getItem("items") === null ){
localStorage.setItem("items", JSON.stringify(workItems));
}
function saveDataInLocalStorage() {
workItems= JSON.parse(localStorage.getItem("items"));
workItems.push(input.value);
localStorage.setItem("items", JSON.stringify(workItems));
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论