При удалении не последнего по счету элемента localStorage остается undefined

Question

Сохраняю данные в localStorage, каждая запись хранит определенную строку, каждая запись имеет название с нумерацией, к примеру task1, task2 и так далее. На странице имееются кнопки, для удаления данных записей по одной. Проблема вот в чем, если я удаляю записи с последней, то все нормально, а если не последнюю, то после обновления страницы, она вновь появится, но строка уже будет undefined. Например: есть task1, task2 и task3, я удаляю task3, после обновления страницы она не появляется вновь, однако, если удалю task1 или/и task2, они восстановятся со строками undefined.

Функция Создания элемента на странице и запись его текста в localStorage:

export function CreateTask(text)
{
    if (document.getElementById('add-task-input') != null) {
        let taskDiv = document.createElement('div');
        let taskTextTag = document.createElement('p');
        let buttonTaskRemove = document.createElement('img');

        taskDiv.setAttribute('id', 'todo-task');
        buttonTaskRemove.setAttribute('id', 'button-task-remove');
        buttonTaskRemove.setAttribute('src', './remove-task-icon.png');
        taskTextTag.setAttribute('onclick', 'eval("' +
            'if (this.style.textDecoration == `line-through`) this.style.textDecoration = `none`;' +
            'else this.style.textDecoration = `line-through`")');
        taskTextTag.setAttribute('id', 'label-task');
        buttonTaskRemove.addEventListener('click', RemoveTaskButtonClick);

        if (text == '')
        {
            taskTextTag.innerHTML = document.getElementById('add-task-input').value;
            document.getElementById('add-task-input').value = '';
        }
        else
        {
            taskTextTag.innerHTML = text;
        }

        taskDiv.appendChild(taskTextTag);
        taskDiv.appendChild(buttonTaskRemove);
        document.getElementById('root').appendChild(taskDiv);

        countTask++;

        localStorage.setItem(`task${countTask}`, text);
    }
}

Функция загрузки записей из localStorage на страницу:

export function LoadTasks()
{
    if (localStorage.length != 0)
    {
        for (let i = 1; i < localStorage.length + 1; i++)
        {
            CreateTask(localStorage[`task${i}`]);
        }
    }
}

Функция удаления записи из localStorage:

function RemoveTaskButtonClick()
{
    for (let i = 1; i < localStorage.length + 1; i++)
    {
        if (localStorage[`task${i}`] == this.parentElement.innerText)
        {
            //delete localStorage[`task${i}`];
            window.localStorage.removeItem(`task${i}`);
        }
    }
    this.parentElement.remove();
}

Проект пишу на React.JS

Answer 1

Во-первых. Итерировать по ключам localStorage, хранящим элементы массивов, - изначально порочный подход. Все развалится, когда Вам понадобится сохранить в localStorage что-нибудь еще.

Во-вторых. Храните весь массив элементов под одним ключом - как сериализованные данные. Удаляйте/добавляйте/изменяйте элементы в массиве - сохраняйте массив в localStorage на каждую такую операцию.

let arrTasks = [];
if (localStorage['myTasks'])
  arrTasks = JSON.parse(localStorage['myTasks']);

...

localStorage['myTasks'] = JSON.stringify(arrTasks);

БЛОГ НА HUSL

При удалении не последнего по счету элемента localStorage остается undefined

Ответы (1 шт):