@Genri_Rus

Как добавить произвольные ключи в объект localStorage?

Всем здравствуйте !

Вот пример: https://codepen.io/Genri_Rus/pen/zXawjm

<div>
  <p><input class="check" id="check-option-1" name="name" type="checkbox">
  <label for="check-option-1"></label>
  </p>
  <p class="copy">1</p>
  <p class="copy-2">1.1</p>
</div>
<div>
  <p><input class="check" id="check-option-2" name="name" type="checkbox">
  <label for="check-option-2"></label>
  </p>
  <p class="copy">2</p>
  <p class="copy-2">2.1</p>
</div>


(function(){
  let checkboxSelector = 'input.check',
      groupWrapperSelector = 'div',
      dataSelectors = ['.copy', '.copy-2'],
      localStorageKey = 'savedItems',
      modal = document.querySelector('.modal'),
      list = JSON.parse(localStorage.getItem(localStorageKey)) || {}

  if (Object.keys(list).length) {
    for (let key in list) {
      document.getElementById(key).checked = true
      modal.innerHTML += list[key]
    }
  }

  document.addEventListener('change', evt => {
    if (evt.target.matches(checkboxSelector)) {
      if (evt.target.checked) {
        addToList(evt.target)
      } else {
        delete list[evt.target.id]
      }
      updateModal(list)
      saveChanges(list)
    }
  })

  function addToList(elem) {
    list[elem.id] = ''
    let wrapper = elem.closest(groupWrapperSelector)
    dataSelectors.forEach(selector => {
	  
      list[elem.id] += wrapper.querySelector(selector).innerText
    })
  }

  function updateModal() {
    modal.innerHTML = Object.values(list).join('')
  }

  function saveChanges(list) {
    localStorage.setItem(localStorageKey, JSON.stringify(list))
  }
})()


Нужно в localStorage хранить не только значения, но и ключи

Примерно вот так:

0: {
 id: id,
 p: текст параграфа
},


В localStorage сейчас вот так:

check-option-1: "11.1"
check-option-2: "22.1"


P.S. В данном варианте у меня в модальном окне выводится только текст, а как сделать, чтобы выводилось с тегами p ?
  • Вопрос задан
  • 588 просмотров
Решения вопроса 1
lastuniverse
@lastuniverse
Всегда вокруг да около IT тем
Вы пишете:

Нужно в localStorage хранить не только значения, но и ключи
Примерно вот так:
0: {
 id: id,
 p: текст параграфа
},



при этом у вас:

<p><input class="check" id="check-option-1" name="name" type="checkbox">
  <label for="check-option-1"></label>
  </p>
  <p class="copy">1</p>
  <p class="copy-2">1.1</p>


объясние, откуда должен взяться id, из какого именно элемента p долже браться текст?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы