Блог

Главная - Вопросы по программированию - Редактирование и удаление списка с помощью кнопки изменение в локальном хранилище

Редактирование и удаление списка с помощью кнопки изменение в локальном хранилище

#javascript #html #local-storage

#javascript #HTML #локальное хранилище

Вопрос:

У меня есть список, и я хочу отредактировать его содержимое, нажав кнопку, затем сохранить его в localstorage и, нажав другую кнопку, я хочу удалить его, а также изменить локальное хранилище, мой список выглядит так: img1

     function editButton(){
        event.target.parentElement.setAttribute("contentEditable", true);

    }
    function deleteButton(){
        event.target.parentElement.remove();
    }

Кнопка удаления работает довольно хорошо, она удаляет элемент li на сцене, а не в локальном хранилище.
Кнопка редактирования делает весь li редактируемым, включая кнопки, но я хочу это изменить.

Мой список после нажатия кнопки редактирования выглядит следующим образом: img2

И вот как я храню свои элементы в локальном хранилище и как я их получаю:

     function store(item){
        let items = JSON.parse(window.localStorage.getItem('myItems'));
        items = items === null ? [] : items;
        console.log(items);
        window.localStorage.setItem('myItems',JSON.stringify([...items,item]));
    }
    function getValues(){
        let list = document.querySelector('ul');
        let storedValues = JSON.parse(window.localStorage.getItem('myItems'));
        if(!storedValues){
            list.innerHTML = '';
        }
        else {
            storedValues.forEach(val =>{
                if(val){
                    list.innerHTML  = '<li>' '<a>'   val.name   " " val.date  '</a>' '<button onclick="editButton()">' "Edytuj" '</button>' '<button onclick="deleteButton()">' "Usuń" '</button>' '</li>';
                }
            })
        }
    }

Комментарии:

1. если edit delete кнопка li включена, вам следует использовать другой div, чтобы он мог содержать все дочерние li элементы, кроме кнопок. И в вашей функции удаления / редактирования не реализован код localstorage.

Ответ №1:

Хорошо, я внес некоторые изменения, и удаление теперь работает хорошо

     function deleteButton(){
        event.target.parentElement.remove();
        let a = event.target.parentElement.innerText;
        let word = a.split(' ');
        let item = new Array();
        let i = 0;
        let storedValues = JSON.parse(window.localStorage.getItem('myItems'));
        window.localStorage.removeItem('myItems');
        storedValues.forEach(val =>{
            if(val.name === word[0]){
                console.log(val.name);
            }
            else {
                item[i] = new storage1(val.name,val.date);
                i  ;
            }
        });
        window.localStorage.setItem('myItems',JSON.stringify(item));
        storedValues = [];
    }

Но я все равно попадаю в этот список редактирования, когда я меняю <li><a></a><button>... <li><a><div></div></a>... его, он не работает, есть ли способ редактировать только текст?
Или, может быть, просто прекратить ввод текста после ввода