Как сохранить localStorage только по клику

Question

Я не нахожу здесь ответов, которые могли бы решить мою проблему. У меня есть эта функция, которую я написал:

$(function() {

    $('.js-blog-select').on('click', function() {
        $(this).closest('.customize-card-md').toggleClass('bg-gray');
        window.localStorage.setItem('togglebg' + this.dataset.id, $(this).closest('.customize-card-md').hasClass('bg-gray'));
    });
    $('.js-blog-select').each(function() {
        //set unique id
        var id = 'togglebg' + this.dataset.id;
        if (localStorage.getItem(id) && localStorage.getItem(id) == "false") {
            $(this).closest('.customize-card-md').removeClass('bg-gray');
          }

    });
});

Вот упрощенный HTML для этого (на странице есть несколько div-ов с классом 'bg-grey', и значение id на входе установлено в инкремент для каждый новый div):

  <div class="done-cancel">
    <input class="mba-done js-mba-done" type="submit" value="Done">
    <input class="mba-cancel" type="button" />
  </div>
 ....

  <div class="customize-card-md bg-gray">
    <input id="blog-1" class="customize-select" type="checkbox">
    <label class="js-blog-select"></label>
  </div>

Функция выше работает просто отлично, переключая класс bg-grey. Проблема в том, что мне нужно установить переключенное состояние каждого div only , когда пользователь нажимает кнопку Done (. js -mba-done). Я пытался вложить событие click в первую часть моей функции onlick, но это казалось плохой идеей. Есть ли способ, которым я могу установить 'togglebg' только после нажатия этой кнопки "Готово"?

Answer 1

Пожалуйста, просмотрите следующий пример.

https://jsfiddle.net/Twisty/rwp3zq1d/

JavaScript

$(function() {
  function getData(i) {
    console.log("GET", i);
    return JSON.parse(localStorage.getItem(i));
  }

  function saveData(i, v) {
    console.log("SAVE", i, v);
    localStorage.setItem(i, JSON.stringify(v));
  }

  function init() {
    $(".customize-card-md").each(function(i, el) {
      var i = $("input", el).attr("id").slice(-1);
      if (getData("togglebg-" + i)) {
        $("input", el).prop("checked", true);
        $(el).removeClass("bg-gray");
      }
    });
  }

  init();

  $(".customize-card-md").on("click", ".js-blog-select", function() {
    var self = $(this);
    var chk = self.prev("input");
    var par = self.parent();
    var i = chk.attr("id").slice(-1);
    chk.prop("checked", !chk.prop("checked"));
    if (chk.is(":checked")) {
      saveData("togglebg-" + i, true);
      par.removeClass("bg-gray");
    } else {
      saveData("togglebg-" + i, false);
      par.addClass("bg-gray");
    }
  });
});

Мы можем используйте функции для выполнения заданных c задач снова и снова. LocalStorage может содержать только строковые данные. Вы используете только True / False, но при необходимости вы можете хранить более сложные данные, как показано выше. Например, вы можете иметь один индекс, togglebgs, а затем сохранить массив всех состояний или объектов.

Если при загрузке страницы все элементы отключены, нам нужно только переключиться. те, которые должны быть "на". Поэтому в нашей программе Init мы проверяем локальное хранилище и включаем его.

Затем мы делаем то же самое с делегированием Click. С .on() лучше всего выбрать родительский элемент и затем делегировать дочернему элементу.