jQuery - включить localStorage при событии клика

Question

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

Но у меня возникают проблемы при переключении значения локального хранилища при нажатии.

Это что у меня есть:

$(fav).click(function(){
      localStorage.setItem('favourited', 'yes');
      $(this).toggleClass('favourite');
});

Я пытался использовать removeItem, если элемент установлен на загрузку, но это просто удалит его один раз и не позволит переключаться.

Answer 1

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

$(fav).on("click", function () {
    $(this).toggleClass('favourite');
    // Define wheter its a favourite item based on the class
    let val = $(this).hasClass('favourite') ? 'yes' : 'no';
    // Set the localStorage
    localStorage.setItem('favourited', val);
});

Answer 2

Я думаю, что-то вроде этого

$(fav).click(function(){

      // You should rely on the data from your local storage since user can reload your application and you cannot rely on your memory or html classes
      const fav = localStorage.getItem('favourited');

      if (fav) {
        localStorage.removeItem('favourited');
        $(this).removeClass('favourite');
      } else {
        localStorage.setItem('favourited', 'yes');
        $(this).addClass('favourite');
     }
});

Answer 3

Вы можете использовать метод hasClass(), чтобы проверить существование класса или нет, а затем переключить localStorage в соответствии с этим:

$(fav).click(function() {
  // if there is a class we set "No" to local storage
  // because the code for toggle will remove that class from the HTML
  var value = $(this).hasClass('favourite') ? 'No' : 'yes';
  localStorage.setItem('favourited', value);
  $(this).toggleClass('favourite');
});

Иллюстрация

var fav = $('.btn');
$(fav).click(function() {
  // if there is a class we set "No" to local storage because the code for toggle will remove that class from the HTML
  var value = $(this).hasClass('favourite') ? 'No' : 'yes';
  console.log(value);
  $(this).toggleClass('favourite');
});

.favourite {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Click</button>