Удалить элемент из локального хранилища

Я пытаюсь удалить элемент из локального хранилища. Это работает, за исключением того, что иногда удаляет более одного элемента.

Я пробовал array.splice удалить локальное хранилище, а затем сбросить его с новыми значениями и не нашел способа это исправить, я уверен, что это что-то простое.

    let itemsArray = JSON.parse(localStorage.getItem("itemsArray")) || [];

    //Initialize Function
    window.addEventListener("load", () => showItems(itemsArray));

    //Add event listener for the form submit
    myForm.addEventListener("submit", onSubmit);

    //Add event listener for the click event on the delete button
    itemList.addEventListener("click", removeItem);

    function showItems(itemsArray) {
        itemList.innerHTML = itemsArray.join("");
    }

    //Place the input into to list of items
    function onSubmit(e) {
      //Prevent the form submission
      e.preventDefault();

        //Create li element for the DOM
        li = document.createElement("li");

        //Place input value into li
        li.appendChild(document.createTextNode(`${item.value}`));

        //Create the delete button and place it to the right of input value
        const btnDelete = document.createElement("button");
        btnDelete.classList.add("btnDelete");
        btnDelete.appendChild(document.createTextNode("X"));
        li.appendChild(btnDelete);
        itemList.appendChild(li);
        itemsArray.push(li.outerHTML);
        localStorage.setItem("itemsArray", JSON.stringify(itemsArray));

        //Reset input value to empty
        item.value = "";
    }

    //Delete item
    function removeItem(e) {
      if (e.target.classList.contains("btnDelete")) {
        if (confirm("Are You Sure You Want To Delete This Item?")) {
          removeLocalStorage();
          let li = e.target.parentElement;
          itemList.removeChild(li);
        }
      }
    }

    function removeLocalStorage(){
      let store = JSON.parse(localStorage.getItem("itemsArray")) || [];
      for(let i = 0; i < store.length; i++){
        store.splice(i, 1);
        localStorage.setItem('itemsArray', JSON.stringify(store));
      }
    }

Все, что я хочу, это удалить элемент, который соответствует элементу, удаляемому из пользовательского интерфейса. Когда я удаляю, скажем, индекс 1, он удаляет все остальные индексы.

По сути, это проект Брэда Трэверси по манипулированию DOM. Я пытаюсь больше работать с локальным хранилищем для других проектов.

Вы не говорите removeLocalStorage, какой элемент удалить. Это просто удаление всех остальных элементов.

Barmar 18.07.2019 04:37

Как элементы пользовательского интерфейса связаны с элементами массива?

Barmar 18.07.2019 04:39

Пожалуйста, добавьте функцию showItems. Также см.: stackoverflow.com/help/минимально-воспроизводимый-пример

colecmc 18.07.2019 04:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
1 402
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы пробовали линию?:

 window.localStorage.removeItem('itemsArray');

Эта строка удалит только элемент с определенным ключом в локальном хранилище.

Я думаю, он просто хочет удалить один элемент из хранящегося там массива, а не весь массив.

Barmar 18.07.2019 04:38

Я попробовал это, в основном это сработало, но когда я обновил страницу, элементы вернулись в локальное хранилище. Возможно, возникла проблема с получением локального хранилища при загрузке страницы.

austinmoore1492 18.07.2019 04:51
Ответ принят как подходящий

Вам нужно передать индекс элемента, который вы хотите удалить, в функцию removeLocalStorage. См. код ниже:

//Delete item
function removeItem(e) {
  if (e.target.classList.contains("btnDelete")) {
    if (confirm("Are You Sure You Want To Delete This Item?")) {
      let li = e.target.parentElement;
      let index = Array.prototype.indexOf.call(itemList.children, li);
      removeLocalStorage(index);
      itemList.removeChild(li);
    }
  }
}

function removeLocalStorage(index){
  let store = JSON.parse(localStorage.getItem("itemsArray")) || [];
  store.splice(index, 1);
  localStorage.setItem('itemsArray', JSON.stringify(store));
}

Да, это помогло. Я подумал, что это что-то простое, чего мне не хватало. Большое спасибо!

austinmoore1492 18.07.2019 05:04

Рад, что смог помочь. Если проблема полностью решена, не могли бы вы отметить ответ как принятый? Спасибо.

Noah 18.07.2019 05:05

Мне кажется, что циклом вы удаляете весь массив. Вы должны передать идентификатор в removeFromLocalStorage(). Там вы должны знать, какой элемент вы хотите удалить. Цикл имеет смысл для меня только в том случае, если вы хотите обнаружить индекс определенного элемента с некоторым свойством. Например:

    ...
          if (
        confirm("Are You Sure You Want To Delete This Item?")
        ) { 
        removeLocalStorage(e.target.id); 
        let li = e.target.parentElement; itemList.removeChild(li); 
}



removeFromLocalStorage(identifier){
        ...
        let id 
        store.forEach((el,index)=> {
            id = el.identifier === identifier && index
        }).
        store.splice(id,1)
        localStorage.setItem('itemArray', JSON.stringify(store))
    ....
    }

Другие вопросы по теме