Как удалять элемент по id из массива обьектов в localstorage?

Question

[dotalovsky]

function createTodoApp(container, title = 'Список дел',defArray,key) {
        // let container = document.getElementById('todo-app');

        let todoAppTitle = createAppTitle(title);
        let todoItemForm = createTodoItemForm();
        let todoList = createTodoList();

        container.append(todoAppTitle);
        container.append(todoItemForm.form);
        container.append(todoList);

        let localData = localStorage.getItem(key);


        if(localData !== null && localData !== '') {
          defArray = JSON.parse(localData);
         }

        if (defArray.length > 0){
          for (let obj of defArray) {
            let defaultTodo = createTodoItem(obj.name,obj.done);
            todoList.append(defaultTodo.item)
            defaultTodo.doneButton.addEventListener('click',function(){
              defaultTodo.item.classList.toggle('list-group-item-success');
            });
            defaultTodo.deleteButton.addEventListener('click',function(){
              if(confirm('Вы уверены?'))
               defaultTodo.item.remove()
                localStorage.removeItem(key)
            });
          }
          arr = defArray;
          setLocal(arr,key)
        }

        todoItemForm.form.addEventListener('submit',function(e) {
            e.preventDefault();

            if(!todoItemForm.input.value) {
                return;
            }
            let todoItem = createTodoItem(todoItemForm.input.value);

            todoItem.doneButton.addEventListener('click',function() {
                todoItem.item.classList.toggle('list-group-item-success')
                if (todoItem.item.classList.contains('list-group-item-success')){
                  todoItem.done = true
                } else {
                  todoItem.done = false
                }
            });

            todoItem.deleteButton.addEventListener('click', function(){
                if (confirm('Точно?')) {
                let delId = JSON.parse(localStorage.getItem(key))
                todoItem.item.remove();
            }
            });

            <b>arr.push({name:todoItemForm.input.value,done:false,id:randomId()})</b>
            setLocal(arr,key)

            todoList.append(todoItem.item);
            todoItemForm.input.value = '';
        });
    }
    window.createTodoApp = createTodoApp;
})();

есть массив в который я пушу name,done,id.Id я создаю с помощью функции,как реализовать удаление из локального хранилища с помощью id который я добавил?

Comments

[Elvis]

приведи пример того что у тебя в localStorage

[dotalovsky]

Elvis,
[{name: "Купить хлеб", done: false}, {name: "Купить молоко", done: true},…]
0: {name: "Купить хлеб", done: false}
1: {name: "Купить молоко", done: true}
2: {name: "ss", done: false, id: 64}
3: {name: "sss", done: false, id: 91}
4: {name: "aaaaa", done: false, id: 77}

[dotalovsky]

Elvis, это как пример,случайные обьекты

Answer 1

[Rsa97]

const removeTodoFromStorage = (id) =>
  localStorage.setItem(
    'todoList',
    JSON.stringify(
      JSON
        .parse(localStorage.getItem('todoList') ?? '[]')
        .filter((item) => item.id !== id),
    )
  );

Comments

[dotalovsky]

А можете коротко объяснить логику работы ?

[Rsa97]

dotalovsky, Достать строку из localStorage, распарсить её, отфильтровать полученный массив, превратить его обратно в строку, записать в localStorage.

Answer 2

[Elvis]

Вытаскиваем из localStorage данные. это будет строка. превращаем в JSON, проходим циклом. Если попался нужный для удаления id - переходим к следующему шагу. Если нет - добавляем в новый массив. после цикла записываем в localStorage новый массив newdata.

let data = '[{"name": "Купить хлеб", "done": false},{"name": "Купить молоко", "done": true},{"name": "ss", "done": false, "id": 64},{"name": "sss", "done": false, "id": 91},{"name": "aaaaa", "done": false, "id": 77}]';
let jsondata = JSON.parse(a);
let newdata = [];
for(let x of jsondata){
    if(x.id == 91){
        continue;
    }
    newdata.push(x);
}

Comments

[dotalovsky]

а скажите пожалуйста,как мне понять какой id добавлять в условие if,если к примеру в списке дел их будет 20 разных,не могу этого момента понять.То есть сейчас идет сравнение с 91,мне туда необходимо добавить сравнение с id по событию или как?

[Elvis]

dotalovsky, тут нужно подставить то что вы хотите удалить. что именно вызывает функцию удаления - не знаю. предполагаю это клик на кнопку "удалить". тогда нужно вызвать функцию удаления что я написал выше с параметром в виде этого id и подставить вместо 91