Как сохранить событие клика в локальном хранилище

Question

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

Когда пользователь щелкает значок, который открывает список, содержащий эти статьи, счетчик уведомлений и событие щелчка должны быть сохранены в локальном хранилище, чтобы при обновлении пользователем страницы браузер знал, что эти статьи «прочитаны» ( в моем случае щелкнул значок).

У меня вопрос: как мне записать это событие и сохранить его в локальном хранилище?

$.each(data.articles, function(index, item) {
  var style1 = '<li class = "eagle"><a href="' + item.html_url + '">' + item.title + '</a><span class = "eagleClose">x</span></li>'

  $('#notificationTab').append(style1);
  $('#notificationTab').each(function() {
    var str = document.getElementById("notificationTab").innerHTML;
    var res = str.replace(/null/g, ' ');
    document.getElementById("notificationTab").innerHTML = res;

    //count how many list items there are and display them in the tomato
    var tabLength = $('#notificationTab .eagle').length;
    $('.notificationCount').text(tabLength);

    //remove notificationCount when bell is clicked
    var removeTomato = $('.notificationTrigger').on('click', function() {
      $('.notificationCount').remove();
    });
  });
});

Answer 1

Поменяйте местами соответствующие строки в вашем коде, и это должно работать:

//count how many list items there are and display them in the tomato
var tabLength = $('#notificationTab .eagle').length;
if (localStorage.hasOwnProperty('notificationCountViewed') && localStorage.getItem('notificationCountViewed')) {
     $('.notificationCount').text();
} else {
     $('.notificationCount').text(tabLength);
}

, а также это:

//remove notificationCount when bell is clicked
var removeTomato = $('.notificationTrigger').on('click', function() {
  $('.notificationCount').remove();
  localStorage.setItem('notificationCountViewed', true);
});