如何解决将多账户待办事项应用程序的数据作为对象存储到 LocalStorage
我正在制作一个包含用户、注册页面、登录页面的待办事项列表应用程序，当然还有将它们存储到 LocalStorage 的列表。所以当用户登录时，我希望页面从本地存储中检索过去的列表。页面很简单，下面只有显示的用户名和列表。
所以我想将数据存储为对象，比如 {listname: list points} 并将它们收集起来以将它们连接到用户的电子邮件。所以，我制作了两个数组，第一个获取列表名称，第二个获取数组中一个列表下的列表点。我想使用一个列表名称作为名称，使用列表点数组作为其值。用户可以根据需要制作尽可能多的列表，所以我需要一个构造函数，或者我不知道如何将它们全部收集到一个对象中。我将给出下面的代码，但如果有另一种方法来存储它们，我将不胜感激。先感谢您。我知道 javascript 代码会太长，但我不想错过任何细节，所以我把它们都给了。
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type="text/css" href="stylesheet2.css">
<title>Dashboard</title>
<script src="https://kit.fontawesome.com/ae444f90db.js" crossorigin="anonymous"></script>
</head>
<body onload = "dashUser();">
<section class ="user-info">
<nav class="topnav">
<a class="active" href="dashboard.html" onClick="dashUser();">Dashboard</a>
<a href="account-setting.html">Account Settings</a>
<a href="#log-out">Log Out</a>
</nav>
<div>
<h2 id="dash-user-info"></h2>
</div>
</section>
<section id = "main-container">
<button id = "list-button" onClick = "newListNamer();">New List</button>
<button onClick = "listSaveButton();">Save</button>
<div class = "content-in">
<ul class = "list">
</ul>
</div>
</body>
<script src="script.js"></script>
</html>
function newListNamer () {
const DIV = document.createElement("div");
DIV.classList = "list-class";
const UL = document.createElement("ul");
UL.class = "ul-class";
const H2 = document.createElement("h2");
H2.className = "new-list-name";
const nameInput = document.createElement("input");
nameInput.type = "text";
nameInput.placeholder = "List Name ";
nameInput.id = "new-name-input";
const LIST = document.createElement("input");
LIST.className = "input";
LIST.placeholder = "What you wish to do?";
LIST.type = "text";
LIST.size = 50;
listHolder.appendChild(DIV);
DIV.appendChild(H2);
DIV.appendChild(nameInput);
DIV.appendChild(UL);
DIV.appendChild(LIST);
const listNumber = document.getElementsByClassName("list-class");
const INPUT = document.getElementsByClassName("input");
const newName = document.getElementById("new-name-input");
const newNameHolder = document.getElementsByClassName("new-list-name");
newName.addEventListener("keyup",function(event){
if(event.code === "Enter") {
if(newName.value) {
newNameHolder[ID].innerHTML = newName.value;
DIV.removeChild(nameInput);
ID++;
}
}
});
for (let z = 0 ; z<listNumber.length ; z++) {
INPUT[z].addEventListener('keydown',function(event) {
if(event.code === 'Enter') {
if(INPUT[z].value) {
const LI = document.createElement("li");
const ICON1 = document.createElement("span");
ICON1.className = "far fa-circle";
const ICON2 = document.createElement("span");
ICON2.className = "far fa-edit";
const POINT = document.createElement("p");
POINT.className = "list-points";
ICON1.addEventListener('click',function() {
ICON1.classList.toggle("fa-times-circle");
POINT.classList.toggle("line-through");
});
LI.appendChild(ICON1);
LI.appendChild(POINT);
LI.appendChild(ICON2);
POINT.innerText = INPUT[z].value;
listNumber[z].appendChild(LI);
INPUT[z].value = "";
}
const DONE = document.getElementsByClassName('far fa-circle');
const LINE = document.getElementsByClassName('list-points');
const EDIT = document.getElementsByClassName('far fa-edit');
for (let j = 0; j<EDIT.length ; j++) {
EDIT[j].addEventListener('click',function () {
console.log("Click works!");
const INPUT2 = document.createElement("input");
INPUT2.size = 30;
INPUT2.className = "list-points";
DONE[j].classList.remove("fa-times-circle");
LINE[j].classList.remove("line-through");
EDIT[j].parentNode.replaceChild(INPUT2,LINE[j]);
INPUT2.addEventListener('keyup',function (event) {
if(event.code === "Enter") {
const newLI = document.createElement("p");
//newLI.innerText = LINE[j].value;
newLI.innerText = INPUT2.value;
newLI.className = "list-points";
LINE[j].parentNode.replaceChild(newLI,INPUT2);
DONE[j].addEventListener('click',function() {
newLI.classList.toggle('line-through');
})
INPUT2.value = "";
}
})
})
}
}
})
}
}
const userListHeaders = [];
const userListDatas = [];
let allUsers = {};
function listSaveButton() {
const listNumber = document.getElementsByClassName("list-class");
for (let l = 0 ; l<listNumber.length ; L++) {
const listHeaders = document.getElementsByClassName('new-list-name')[l].innerHTML;
const dataArrays = [listNumber[l].querySelectorAll('li')];
userListHeaders.push(listHeaders);
userListDatas.push(dataArrays);
allUsers.userListHeaders[l] = userListDatas[l];
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
