Как записать надпись на кнопке в cookies?

Question

[karabyukliyn]

Я не понимаю в но у меня есть код, при клике на кнопку изменяется текст на ней. Как сделать чтобы при обновлении страницы сохранялся текст который был при последнем клике?
вот сам код:

const btn = document.querySelectorAll('.btn > span');
for (let i = 0; i < btn.length; i++) {

  btn[i].addEventListener('click', function() {
    this.innerHTML =
      (this.innerHTML === 'Добавить в избранные') ? this.innerHTML = 'Удалить из избранных' : this.innerHTML = 'Добавить в избранные';
  })


}

Comments

[Сергей Соколов]

сохранять предлагаете, опираясь на порядковый номер i ?
Если завтра добавится кнопка где-то посередине – все сохранённые в куках значения сползут.
Надо бы, чтоб каждый кнопк имел уникальный id

Answer 1

[Сергей Соколов]

Сохранять удобнее не в куках, а в localStorage.

Нужна модель данных. Есть кнопки, у каждой, наверное, уникальный id. На случай, если их перемешают иначе, или добавится новая — полагаться только на порядковый номер в коллекции, i, не годится: сейчас на 3-м месте одна кнопка, завтра окажется другая, а мы для неё запомнили включённое состояние.

Итак, есть кнопки с уникальными id. Кнопка может быть добавлена или не-добавлена в избранное. Булево значение: true или false. Запоминать будем набор пар ключ-значение. Ключ id, значение true/false. Что-то типа { "abc123": true, "xyz789": false, }

При загрузке страницы проверить, есть ли сохранённый комплект? Применить его. Остальным кнопкам значение по-умолчанию.

При любом изменении кнопок — сохранять обновлённую коллекцию.

Надписи показывать исходя из true/false в этой коллекции.