Как удалить определённую запись из localStorage при нажатии кнопки?

Question

Camila

javascript

Как удалить определённую запись из localStorage при нажатии кнопки?

Как можно реализовать кнопку удаления, которая будет находить и удалять конкретный объект из localStorage, основываясь на строке, в которой она находится, при отображении объектов с ключом "film"? Пожалуйста, помогите, у меня возникли трудности с этой задачей.

9 декабря 2024 г. 21:43

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для удаления конкретной записи из `localStorage` при нажатии кнопки, основываясь на строке, в которой она находится, мы можем следовать следующему примеру:

1. Сначала мы будем хранить объекты в `localStorage` под ключом `"film"` в виде JSON-строки.
2. Затем мы выведем эти объекты на экран с кнопкой удаления для каждого объекта.
3. При нажатии на кнопку удаления мы будем находить нужный объект и удалять его из `localStorage`.

Вот пример кода, который демонстрирует этот процесс:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Удаление из localStorage</title>
</head>
<body>
    <div id="film-list"></div>

    <script>
        // Пример данных - массив объектов
        const films = [
            { id: 1, title: 'Фильм 1' },
            { id: 2, title: 'Фильм 2' },
            { id: 3, title: 'Фильм 3' }
        ];

        // Сохраняем массив в localStorage
        localStorage.setItem('film', JSON.stringify(films));

        // Функция для отображения списка фильмов
        function displayFilms() {
            const filmListElement = document.getElementById('film-list');
            filmListElement.innerHTML = ''; // Очищаем предыдущий список
            const filmsFromStorage = JSON.parse(localStorage.getItem('film')) || [];
            
            filmsFromStorage.forEach(film => {
                const filmElement = document.createElement('div');
                filmElement.textContent = film.title;

                // Создаём кнопку удаления
                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Удалить';
                deleteButton.onclick = function() {
                    deleteFilm(film.id);
                };

                filmElement.appendChild(deleteButton);
                filmListElement.appendChild(filmElement);
            });
        }

        // Функция для удаления фильма
        function deleteFilm(id) {
            const filmsFromStorage = JSON.parse(localStorage.getItem('film')) || [];
            const updatedFilms = filmsFromStorage.filter(film => film.id !== id);
            localStorage.setItem('film', JSON.stringify(updatedFilms)); // Обновляем localStorage
            displayFilms(); // Перерисовываем список фильмов
        }

        // Инициализация и отображение данных при загрузке страницы
        displayFilms();
    </script>
</body>
</html>
```

### Объяснение кода:

1. **Сохранение данных:** Мы создаём массив объектов `films` и сохраняем его в `localStorage` как строку JSON под ключом `'film'`.

2. **Отображение списка:** Функция `displayFilms()` извлекает данные из `localStorage`, парсит их и отображает на странице. Для каждого фильма создаётся кнопка `Удалить`.

3. **Удаление объекта:** Функция `deleteFilm(id)` принимает `id` фильма и обновляет массив, фильтруя нужный объект. Затем обновлённый массив сохраняется обратно в `localStorage`, и список фильмов перерисовывается.

При нажатии на кнопку "Удалить" соответствующий объект будет удалён из `localStorage`, а на странице обновится список фильмов.

Answer 2

найти нужный индекс объекта например через findIndex и удалить его к примеру через splice <br/> <pre><code class="javascript">const filmsArray = JSON.parse(localStorage.get('film'))
const removeIndex = filmsArray.findIndex(item =&gt; item.title === 'название фильма') 
filmsArray.splice(removeIndex, 1)
localStorage.set('film', filmsArray)</code></pre>