Почему проблема с localStorage?

Question

[Tishaa]

подскажите где ошибка не пойму, всё работало, добавляло в разметку, до того момента как добавил функцию dele()
после этого я удалил 1 фильм но удалились все, и больше нельзя нечего добавить выпадает ошибка в forEach в функции rend() причом даже если я удаляю функцию dele() всё равно нечего не работает, подозреваю что форейчу не по чему бежать, так как все данные удалины из локала, но тут 2 вопроса тогда тоже, почему removeItem сработал как clear и второй вопрос, по поводу форейча если в переменной films не чего нету, || [] - то должен создастся пустой массив же
ещё при добавление вылезет ошибка в films.push(x) в функции add()

let btnAdd = document.querySelector('.add');
let btnpoisk = document.querySelector('.poisk');
let ul = document.querySelector('ul');
let del = document.querySelector('.del'); 
let mas = []

function rend(){
    ul.innerHTML =""
    let films = JSON.parse(localStorage.getItem("film")) || []
    films.forEach(elem => {
        let liEl = document.createElement('li');
        liEl.textContent = elem
        ul.append(liEl)
    });
}

rend()

function add(){
    let x = prompt("Название")
    let films = JSON.parse(localStorage.getItem("film"))
    films.push(x)
    localStorage.setItem("film", JSON.stringify(films))
    rend()
}

function dele(){
    let x = prompt("Какую")
    let films = JSON.parse(localStorage.getItem("film"))
    films.forEach(elem=>{
        if (elem ==x ){
            localStorage.removeItem("film", JSON.stringify(elem))
        }
    })
}

btnAdd.onclick = function(){
    add()
}

del.onclick = function(){
    dele()
}

Comments

[VoidVolker]

Tishaa Прочитайте, пожалуйста, статью Как правильно задавать вопросы, затем чётко сформулируйте свою проблему и опишите её нормальным русским языком вместо слабосвязанного потока слов и фраз. А еще лучше сделайте демо на JSFiddle или CodePen.

Answer 1

[Elaryks]

removeItem() удаляет элемент по ключу, а не по значению. В этот метод передаётся только один аргумент. Вам же нужно изменить массив и сохранить его обратно:

function dele() {
    let x = prompt("Какую");
    let films = JSON.parse(localStorage.getItem("film")) || [];

    films = films.filter(elem => elem !== x);

    localStorage.setItem("film", JSON.stringify(films));
    rend();
}

Кроме того, при добавлении элемента вы не проверяете, существует ли массив перед добавлением в него элемента:

function add() {
    let x = prompt("Название");
    let films = JSON.parse(localStorage.getItem("film")) || [];

    films.push(x);
    localStorage.setItem("film", JSON.stringify(films));
    rend();
}