Как удалить определенный элемент из массива в localstorage?

Question

Я работаю над инструментом, который поможет людям отслеживать свои машины в GTA, но я не могу понять, как их удалить.

Я пробовал несколько вещей, но могу ' не заставить его работать.

Вот мой кодовый блок https://codepen.io/Tristangre97/pen/dyoyOKw?editors=1010

function deleteItem(index) {
  var existingEntries = JSON.parse(localStorage.getItem("allCars"));
  existingEntries.splice(0, index); // delete item at index
}

Answer 1

Splice не будет обновлять локальное хранилище, вместо этого, после удаления элементов вам нужно записать новый массив обратно в локальное хранилище:

localStorage.setItem("allCars", existingEntries)

Answer 2

Предоставленный CodePen работает ... поэтому я предполагаю, что он был исправлен, поскольку проблема заключалась в неправильных позициях 2 параметров метода .splice() Array:

Оригинал

/*
1st parameter is the index position of where within the array to start
2nd parameter is the quantity of array elements to remove
So this would always start at the beginning of the array and nth amount of elements
*/
existingEntries.splice(0, index);

Правильно

/*
This will start at the specified index position and remove just that element
*/
 existingEntries.splice(index, 1);

Демо

Подробности прокомментированы в демоверсии
Примечание: SO Stack Snippets блокирует API-интерфейс веб-хранилища, поэтому для ознакомления с работающей демонстрацией см. CodePen

// Reference the <form>
const list = document.forms.gtaList;

/*
Utility functions to get/set/show localStorage data
lsGet() and lsSet() are self-explanatory
the data will be either an array of objects or an empty array
viewList() renders a <button> for each entry of the data
*/
const lsGet = key => JSON.parse(localStorage.getItem(key)) || [];
const lsSet = (key, value) => localStorage.setItem(key, JSON.stringify(value));

const viewList = data => {
  const display = list.elements.display;
  display.value = "";
  data.forEach((entry, index) => {
    display.insertAdjacentHTML(
      "beforeend",
      `<button type='button' data-idx='${index}'>
         ${entry.address} 
         --==-- 
         ${entry.car}
       </button><br>`
    );
  });
};
// Initial display of data if any in localStorage
viewList(lsGet("gtaData"));

// Register the click event to the <form>
list.onclick = autoList;

// Pass the event object (ie e)
function autoList(e) {
  // Reference all form controls of <form> (ex. input, button, select, etc)
  const gta = this.elements;
  // Get current value of <select> and <input>
  const address = gta.garage.value;
  const car = gta.auto.value;
  // Define empty object declare data
  let entry = {};
  let data;

  /*
  if the clicked tag (ie e.target) is a <button>...
  and if clicked tag id is '#add'...
  Get data from localStorage
  Assign the values of <select> and <input> to the entry object
  Add entry object to data array
  */
  /*
  ...or if the clicked tag has [data-idx] attribute...
  Get the [data-idx] value and convert it into a real Number
  Next remove() the clicked <button> from the DOM
  Get data from localStorage and splice() the object at the index
  position designated by the clicked <button> [data-idx] Number
  */
  /*
  Display data as a group of <button>s
  Finally set data to localStorage
  */
  if (e.target.tagName === "BUTTON") {
    if (e.target.id === "add") {
      data = lsGet("gtaData");
      entry.address = address;
      entry.car = car;
      data.push(entry);
    }
    if (e.target.hasAttribute('data-idx')) {
      let idx = Number(e.target.dataset.idx);
      e.target.remove();
      data = lsGet("gtaData");
      data.splice(idx, 1);
    }
    viewList(data);
    lsSet("gtaData", data);
  }
}

:root,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font: 700 3vw/1.2 Consolas;
}

form {
  width: 90vw;
  margin: 10vh auto;
}

input,
select,
button {
  display: inline-block;
  padding: 2px 5px;
  font: inherit;
}

<form id="gtaList">
  <select id="garage">
    <option value="" selected>Select Location</option>
    <option value="Little Bighorn Ave">Little Bighorn Ave</option>
    <option value="Unit 124 Popular St">Unit 124 Popular St</option>
    <option value="1 Strawberry Ave">1 Strawberry Ave</option>
    <option value="142 Paleto Blvd">142 Paleto Blvd</option>
  </select>
  <input id="auto" placeholder="Mustang">

  <button id="add" type="button">Add</button>
  <fieldset>
    <legend>Click to Remove</legend>
    <output id="display"></output>
  </fieldset>
</form>

Answer 3

function deleteItem(index) {
  const existingEntries = JSON.parse(localStorage.getItem("allCars"));
  existingEntries.splice(index, 1);
  localStorage.setItem("allCars", JSON.stringify(existingEntries));
}

Первый аргумент в соединении - это индекс, а второй - длина. Кроме того, вы должны сохранить новый массив в localStorage.