如何使用 java 脚本从本地存储中获取存储的 object 数组并在浏览器中显示
[英]How to get stored object array from local storage and display in the browser using java script
问题描述
I want to create a journal app that users can give titles and contents.
我想创建一个用户可以提供标题和内容的日记应用。 this title and content save in the local storage as and later both need to display on the browser.这个标题和内容保存在本地存储中，以后都需要在浏览器上显示。 I successfully did the storing part.我成功地完成了存储部分。 however, when I trying to display title and content, it displays as undefined.但是，当我尝试显示标题和内容时，它显示为未定义。
//html
<body onload="displayTodo()">
<input type="text" name="" id="textTitle">
<input type="text" name="" id="textContent">
<button type="submit" id="add">add</button>
<div id="display"></div>
<script src="main.js"></script>
</body>
</html>
//java script
let textTitle = document.getElementById("textTitle");
let textContent = document.getElementById("textContent");
let display = document.getElementById('display');
document.getElementById('add').addEventListener('click', addToStorage);
function addToStorage() {
let textTitleValue = textTitle.value;
let textContentValue = textContent.value;
// insert user inpurt into an abject array
let notes = [{
"title": textTitleValue,
"content": textContentValue
}]
// get the exsisting jason data from the local storage and convert to string values
let getNotes = JSON.parse(localStorage.getItem("diary")) || [];
// push the user input into the converted object array
getNotes.push(notes);
// convert string to json data
let notes_s = JSON.stringify(getNotes);
// send the json data in to localstorage
localStorage.setItem("diary", notes_s);
console.log(localStorage);
}
function displayTodo() {
let notesObject = JSON.parse(localStorage.getItem("diary"));
let newNotesObject = [];
newNotesObject.push(notesObject);
// console.log(newObjectFor);
for (let i = 0; i < newNotesObject.length; i++) {
console.log(newNotesObject[i]);
let item = `
<li>
<p class="form-control" id="exampleFormControlInput1">${newNotesObject[i].title}</p>
<p class="form-control" id="exampleFormControlInput1">${newNotesObject[i].content}</p>
</li>
`
display.innerHTML += item;
}
}
2 个解决方案
解决方案1
2 2020-12-26 14:12:05
You are creating new array each time you are adding any new object.每次添加任何新 object 时，您都在创建新阵列。 Updated JS:更新的 JS：
let textTitle = document.getElementById("textTitle");
let textContent = document.getElementById("textContent");
let display = document.getElementById('display');
document.getElementById('add').addEventListener('click', addToStorage);
function addToStorage() {
let textTitleValue = textTitle.value;
let textContentValue = textContent.value;
// insert user inpurt into an abject array
let notes = {
"title": textTitleValue,
"content": textContentValue
};
// get the exsisting jason data from the local storage and convert to string values
let getNotes = JSON.parse(localStorage.getItem("diary")) || [];
// push the user input into the converted object array
getNotes.push(notes);
// convert string to json data
let notes_s = JSON.stringify(getNotes);
// send the json data in to localstorage
localStorage.setItem("diary", notes_s);
console.log(localStorage.getItem("diary"));
}
function displayTodo() {
let notesObject = JSON.parse(localStorage.getItem("diary"));
for (let i = 0; i < notesObject.length; i++) {
console.log(notesObject);
let item = `
<li>
<p class="form-control" id="exampleFormControlInput1">${notesObject[i].title}</p>
<p class="form-control" id="exampleFormControlInput1">${notesObject[i].content}</p>
</li>
`
display.innerHTML += item;
}
}
解决方案2
0 2020-12-26 14:19:21
On page load displayTodo function is called and this function is taking title and content from local storage named as "diary" but at this point, there is no such storage named as "diary".
在页面加载displayTodo function 被调用，这个 function 正在从名为“日记”的本地存储中获取标题和内容，但此时，没有名为“日记”的存储。 So it will print undefined on page load所以它会在页面加载时打印 undefinedWhen button click addToStorage function triggered.
当按钮单击addToStorage function 时触发。 This function is taking data from a local-storage named "diary".这个 function 正在从名为“日记”的本地存储中获取数据。 But there is no data here till now in diary storage.但是到目前为止，这里还没有日志存储中的数据。 So it will set undefined in localstorage.所以它将在本地存储中设置未定义。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.