Как сохранить состояние флажка даже после обновления страницы?

Question

У меня есть несколько флажков на моем пользовательском интерфейсе, которые при проверке делают некоторые операции. Но в тот момент, когда я обновляю страницу, все флажки снова снимаются. Как я могу использовать AJS.Cookie (фреймворк Atlassian Javascript) для сохранения состояния. Исходный код, который я написал, но он дает значение cookie как неопределенное.

'#generate-canvas-button' это идентификатор кнопки, которая пропускает все отмеченные флажки.

// Wait until the page is completely loaded.
AJS.$(document).ready(function() {
  // Iterating over all checkboxes on page.
  $('input:checkbox').each(function() {
    // Getting checkbox name.
    var name = $(this).attr('name');
    // Checking saved cookie.
    if (AJS.Cookie.read(name)) {
      // Updating checkbox state.
      $(this).prop('checked', true);
    }
  });

  // Clicking the OK button should run submit(), pop up displays all checked boxes
  $('#generate-canvas-button').click(submit);
});

function submit() {
  var checked = [];
  var targetGroupActors = [];
  var bigPictureActors = [];
  var bigPictureImpacts = [];
  var productDetailsActors = [];
  var productDetailsDeliverable = [];

  // Iterating over all checkboxes on page.
  $('input:checkbox').each(function() {
    // Getting checkbox name.
    var name = $(this).attr('name');
    // Checking checkbox state.
    if ($(this).is(":checked")) {
      // Saving checkbox name to cookie.
      AJS.Cookie.save(name, true);
    } else {
      // Remove checkbox state from cookie.
      AJS.Cookie.erase(name);
    }

    if ($(this).is(":checked")) {
      impactMapValues = $( this ).prop('id');
      impactMapActor = $( this ).prop('name');
      var value = document.getElementById(impactMapValues).value;

      if (impactMapActor == "actor-checkbox") {
        targetGroupActors.push(value);
      }

      if (impactMapActor == "impact-checkbox") {
          var result = value.split(",");
          actor_value = result[0];
          impact_value = result[1];
          bigPictureActors.push(actor_value);
          bigPictureImpacts.push(impact_value);
      }

      if (impactMapActor == "deliverable-checkbox") {
        var result = value.split(",");
        actor_value = result[0];
        deliverable_value = result[1];
        productDetailsActors.push(actor_value);
        productDetailsDeliverable.push(deliverable_value);
      }

      checked.push(value);
    }
  });

  addTotargetGroup(targetGroupActors);
  addToBigPicture(bigPictureActors,bigPictureImpacts);
  addReleaseTarget(productDetailsActors,productDetailsDeliverable);
}

Answer 1

Попробуйте этот подход:

// Wait until the page is completely loaded.
$(document).ready(function() {
  // Iterating over all checkboxes on page.
  $('input:checkbox').each(function() {
    // Getting checkbox name.
    var name = $(this).attr('name');

    // Checking saved cookie.
    if (AJS.Cookie.read(name)) {
      // Updating checkbox state.
      $(this).prop('checked', true);
    }

    // Attaching onchange handler.
    $(this).change(function() {
      // Checking checkbox state.
      if ($(this).is(":checked")) {
        // Saving checkbox name to cookie.
        AJS.Cookie.save(name, true);
      } else {
        // Remove checkbox state from cookie.
        AJS.Cookie.erase(name);
      }
    });
  });
});

Answer 2

Используйте концепцию viewstate для использования другой логики куки

Answer 3

Оберните всю свою логику в

AJS.toInit(function ($) {
    // You can use $ instead of AJS.$ here
    ...
});

Это эквивалент Атлассиана $(document).ready(...) который позволяет загружать весь код Atlassian перед вызовом вашего.