LocalStorage удаляет элемент из объекта, используя JavaScript

Question

Я хочу удалить элемент из объекта localstorage:

addToFavs: [{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}]

Я сохранил информацию, затем я проверил, найден ли элемент, я должен удалить его:

/*** getID is the items clicked ***/

var retrievedData = localStorage.getItem("addToFavs");
    
    var parseData = jQuery.parseJSON(retrievedData);

    $.each(parseData, function(x,y){
        if(y['fav-name'] == getID){
            console.log(getID+' found on '+x);
            console.log(parseData[x]);
            localStorage.removeItem(parseData[x]);
            console.log(x+' removed');
        } else {
            console.log(getID+' NOT NOT found on '+x);
        }

}); // end $.each

Заранее спасибо

Answer 1

Вы не можете этого сделать:

localStorage.removeItem(parseData[x]);

Вам нужно либо обновить проанализированный массив, либо создать новый, а затем stringify обратно до JSON, а setItem до обновите значение в localStorage. Поскольку localStorage может хранить только строки, а не массивы или объекты.

filter было бы хорошим способом сделать это:

var jsonString = localStorage.getItem("addToFavs");
var arr = JSON.parse(jsonString);
// Filter to keep only those with a different ID than getID
arr = arr.filter(function(item) { return item['fav-name'] !== getID; });
// Store it back, stringified
localStorage.setItem("addToFavs", JSON.stringify(arr));

Answer 2

1. Значение в локальном хранилище является строкой
2. Прочитать значение из локального хранилища по ключу
3. Расшифровать значение строки
4. Применить Array.prototype .filter функция для фильтрации значения из массива
5. Кодирование значения массива
6. Запись его в локальное хранилище с использованием того же ключа

Answer 3

Чтобы не напугать или что-то в этом роде

addToFavs: [{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}]. <---- в этой строке кода <code>addToFavs - это элемент в локальном хранилище, а не объект, который вы сохранили.

и локальное хранилище поддерживает хранение только типа строка: строка как элемент: значение, поэтому

localStorage.removeItem(parseData[x]); <--- эта строка кода здесь пытается найти элемент, в вашем случае </p>

, который на самом деле находится внутри вашего строкового объекта, который сам по себе является значением addToFavs item ,

, следовательно, вам нужно удалить элемент из объекта и снова сохранить addToFavs, как показано ниже.

var ls = window.localStorage;
ls.setItem('addToFavs', '[{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}]');

var getId = 'fav-787336';

var item = JSON.parse(ls.getItem('addToFavs'));

var updatedItems = item.filter(val => (val['fav-name'] === getId));

console.log(updatedItems);

//update loacl storage again

ls.setItem('addToFavs', JSON.stringify(updatedItems))

код не будет работать, поскольку доступ к localStorage не предоставляется из-за соображений безопасности, не стесняйтесь запускать код в консоли браузера.