Блог

Главная - Вопросы по программированию - как использовать локальное хранилище? (когда функция click добавляет идентификатор данных в класс, цвет css изменяется)

как использовать локальное хранилище? (когда функция click добавляет идентификатор данных в класс, цвет css изменяется)

#javascript #jquery

#javascript #jquery

Вопрос:

Я попробовал это с jquery кодом ниже, но его нельзя сохранить в localstorage , есть ли решение, отличное от метода, приведенного ниже?

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<a class="abc" data-id="1">Attachments</a>
<a class="abc" data-id="2">Removal</a>
<a class="abc" data-id="3">Hair Loss</a>

jQuery

 $(document).ready(function() {
  $(".abc").click(function() {
    var dataID = $(this).data('id');
    var idAdd = $(this).addClass("id"   dataID);
    $(idAdd).css({
      "background": "#fcffd6",
      "border": "3px solid #acdcd86b"
    });
    localStorage.setItem("someVarName", $(this).text());
  });

  if (localStorage.getItem("someVarName") != null) {
    var dataID = $(this).data('id');
    var clAD = $(this).addClass("id"   dataID);
    $(clAD).filter(function() {
      return this.innerHTML == localStorage.getItem("someVarName");
    }).css({
      "background": "#fcffd6",
      "border": "3px solid #acdcd86b"
    });
  }
});

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

1. Вы хотите сохранить текст в localStorage, а затем вернуть его при загрузке страницы и применить к этому тексту фоновый цвет?

Ответ №1:

Код

 var dataID = $(this).data('id');
    var clAD = $(this).addClass("id"   dataID);
    debugger
    $(clAD).filter(function() {
      return this.innerHTML == localStorage.getItem("someVarName");
    }).css({
      "background": "#fcffd6",
      "border": "3px solid #acdcd86b"
    });

не имеет никакого смысла. Что вы хотите сделать здесь, так это перечислить и отфильтровать все a-элементы:

 $("a").filter(function() {
      return this.innerHTML == localStorage.getItem("someVarName");
    }).css({
      "background": "#fcffd6",
      "border": "3px solid #acdcd86b"
    });