即使在页面刷新后如何保存复选框状态？

Question

我的 UI 上有多个复选框，在进行某些操作时选中这些复选框。但是在我刷新页面的那一刻，所有复选框都被再次取消选中。如何使用 AJS.Cookie（Atlassian Javascript 框架）来保存状态。我编写的源代码，但它给出的 cookie 值未定义。

'#generate-canvas-button' 是通过所有选中复选框的按钮的 ID。

// 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

使用视图状态概念而不是使用其他 cookie 逻辑

Answer 3

把你所有的逻辑都包进去

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

这是 Atlassian 的 $(document).ready(...) 等效项，它允许在调用您的代码之前加载所有 Atlassian 代码。