Как сохранить элементы разметки и удалить в localStorage

Question

Приложение заметок , надо чтобы сохранялись заметки с введенным текстом в localStorage и если нажимали удалить заметку ,то оно стиралось и в localStorage, попробовал реализовать

Сам код приложения:

const containerNote = document.querySelector('.note-container')

Массив для сохранения в localStorage

let itemsArray = []
localStorage.setItem('items', JSON.stringify(itemsArray))
const data = JSON.parse(localStorage.getItem('items'))

Функция создания новой заметки

let createNote = () => {
document.querySelector('.btn-addNote').addEventListener('click', function () {
    let displayNote = `
    <div class="card w-100 mt-5">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div class="note-date">
                ${time()}
            </div>

            <div class="checkers">
                <input type="radio" aria-label="Radio button for following text input" class="input-focus mr-3">
                <button type="button" class="btn btn-danger btn-del" onclick="delNote(this)">Delete button</button>
            </div>
        </div>
        <div class="card-body">
            <textarea name="" id="" cols="30" rows="10" class="w-100" style="border: 0"
            onfocus="addFocusToNote(this)" onblur="removeFocusToNote(this)"
            ></textarea>
        </div>
    </div>
`
    containerNote.innerHTML += displayNote
    itemsArray.push(displayNote)
    localStorage.setItem('items', JSON.stringify(itemsArray))
})
}

    createNote()

Функция для вывода запушенных данных после перезагрузки страницы

    data.forEach(item => {
    createNote(item)
})

Функция которая удаляет заметку ,но не понимаю как удалять каждую сохраненную заметку из localStorage

let delNote = (that) => {
that.closest('div.card').remove()
}

Answer 1

Как вариант, тут есть 2 возможных решения вопроса или ты удаляешь все заметки.

localStorage.removeItem('items')

Или если ты хочешь, удалить часть заметок, а часть осталась, тогда.

const items = localStorage.getItem('items') // получаешь заметки.
items.forEach(item) => {
  // что-то с ними делаешь, например удаляешь не нужные заметки.
}
localStorage.setItem('items', JSON.stringify(items)) //кладешь новый массив заметок в localStorage.

Тебе стоит в local Storage хранить только описание, нет смысла хранить разметку, если ты можешь её в любой момент генерировать.

let ltems = (!localStorage.getItem('items') ? 
JSON.parse(localStorage.getItem('items')) : []);

ltems.forEach(item => {
   let displayNote = `
      <div class="card w-100 mt-5">
        <div class="card-header d-flex justify-content-between align-items-center">
        <div class="note-date">
            ${time()}
        </div>

        <div class="checkers">
            <input type="radio" aria-label="Radio button for following text input" class="input-focus mr-3">
            <button type="button" class="btn btn-danger btn-del" onclick="delNote(this)">Delete button</button>
        </div>
    </div>
    <div class="card-body">
        <textarea name="" id="" cols="30" rows="10" class="w-100" style="border: 0"
        onfocus="addFocusToNote(this)" onblur="removeFocusToNote(this)"
        ></textarea>
    </div>
</div>
`
 containerNote.innerHTML += displayNote
  })

  let createNote = () => {
     document.querySelector('.btn-addNote').addEventListener('click', () => {
        items = [...items, 1]
        localStorage.setItem('items', JSON.stringify(items));
     })
  }

createNote()

БЛОГ НА HUSL

Как сохранить элементы разметки и удалить в localStorage

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