I have a bunch of li with id's that is related with the id's inside the array in localstorage, when I delete an li the element from the array is deleted as well, but if I recharge my navigator the id's of my li's is updating but in localstorage is not update, how can i update the ids into the localstorage and make match with the li id's
const listaTweets = document.getElementById('lista-tweets');
let li;
let comment;
evenListeners();
function evenListeners() {
document.querySelector('#formulario').addEventListener('submit', addTweet);
listaTweets.addEventListener('click', deleteComment);
document.addEventListener('DOMContentLoaded', localStorageDone)
}
function addTweet(e) {
e.preventDefault();
comment = document.getElementById('tweet').value;
if(comment) {
createLi(comment)
const liId = li.id
addCommentLocalStorage(comment, liId)
}
}
function createLi(comment) {
const deleteButton = document.createElement('a');
deleteButton.classList = 'delete-comment';
deleteButton.innerText = 'x';
li = document.createElement('li');
li.innerText = comment;
li.appendChild(deleteButton);
listaTweets.appendChild(li);
if (li) {
for (let i = 0; i < listaTweets.children.length; i++) {
li.setAttribute('id', 'tweet__number' + i)
}
}
}
function deleteComment(e) {
e.preventDefault();
li = e.target.parentElement;
if(e.target.className === 'delete-comment') {
li.remove();
deleteCommentLocalStorage()
}
}
function addCommentLocalStorage(comment, liId) {
let arrayComments;
let idComment = liId
arrayComments = getFromLocalStorage();
arrayComments.length === 0 ? idComment = liId : (arrayComments[arrayComments.length - 1].idComment)
let object = {
id: idComment,
com: comment
}
arrayComments.push(object)
localStorage.setItem('comments', JSON.stringify(arrayComments))
}
function getFromLocalStorage() {
let arrayComments;
if(localStorage.getItem('comments') === null) {
arrayComments = []
} else {
arrayComments = JSON.parse(localStorage.getItem('comments'))
}
return arrayComments
}
function localStorageDone() {
let arrayComments;
arrayComments = getFromLocalStorage();
arrayComments.forEach(function(comment){
createLi(comment.com)
})
}
function deleteCommentLocalStorage() {
let arrayComments = getFromLocalStorage();
arrayComments.forEach(function(comment){
if(comment.id === li.id) {
let i = arrayComments.indexOf(comment);
arrayComments.splice(i, 1);
}
localStorage.setItem('comments', JSON.stringify(arrayComments));
})
}
I found a typo.
// before
arrayComments.length === 0 ? idComment = liId : (arrayComments[arrayComments.length - 1].idComment)
// after
arrayComments.length === 0 ? idComment = liId : (arrayComments[arrayComments.length - 1].id)
However, after correcting the typo, it seems that there is a problem that the id of listaTweets and the id of arrayComments do not match each other when inserting/removing items. I think you should check this more.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.