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

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

“#生成画布按钮”

是通过所有复选框的按钮的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);
}

尝试以下方法：

// 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);
      }
    });
  });
});

---

在使用其他Cookie逻辑的同时使用viewstate概念

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

---

这是Atlassian的等价物

$（document）.ready（…）

，它允许在调用您的代码之前加载所有Atlassian代码。

我尝试过这一点，但没有$（document）.ready（function（），因为我将整个代码放在一个javascript文件中，它没有被写入。使用AJS.log（AJS.Cookie.save（name，true））；未定义。@user\u dev您应该使用

$（文档）.ready

。我已经更新了代码段中的注释。谢谢Valetin，我正在用我编写的完整代码更新问题中的代码。@用户\u dev如果您想在重新加载页面后保留复选框状态，您需要执行以下流程：1.等待页面完全加载（例如

$（文档）。ready

）；2.遍历第页上的所有复选框；3.检查复选框的名称以前是否保存到cookie；4.如果步骤3为

true

则将复选框状态设置为

checked

；5.将

onchange

处理程序附加到复选框；6.内部

onchange

处理程序根据复选框状态设置或删除cookie；7.重新加载页面。我无法使用p投票，因为我在贫困线以下。需要15次投票：）使用AJS.toInit意味着您要等到Atlassian版本的jquery完全加载后才能调用它。详情如下：