页面刷新后如何保留提交按钮状态？Cookie与Session选哪个？

嘿，你的需求是页面刷新后保留按钮的启用/禁用状态，本质就是保存复选框的勾选状态对吧？咱们来掰扯下这三个选项：

• Session就别考虑了：Session是存在服务器端的，得靠用户的Session ID（一般存在Cookie里）关联。但你的需求只是在同一个浏览器里刷新页面后记住状态，完全不需要服务器掺和，用Session纯属杀鸡用牛刀，还平白给服务器加存储负担。
• Cookie可以用，但不是最优：Cookie能存在浏览器里，刷新后也能读，但它会在每次发请求时都跟着传给服务器，而你的这个状态根本不需要服务器知道，有点浪费带宽。
• 最推荐LocalStorage：这是HTML5自带的客户端存储API，数据存在浏览器本地，容量比Cookie大（一般5MB），不会随请求发送，操作还简单，完美匹配你的需求。

基于LocalStorage的修改代码 #

直接给你改好的代码，替换原来的就行：

$(document).ready(function() {
  var the_terms = $("#tandcCheck");
  var submitBtn = $(".submit");

  // 页面加载时，读取本地存储的状态，恢复复选框和按钮状态
  var isChecked = localStorage.getItem("termsChecked") === "true";
  the_terms.prop("checked", isChecked);
  submitBtn.prop("disabled", !isChecked);

  // 点击复选框时更新状态并保存到本地存储
  the_terms.click(function() {
    var checked = $(this).is(":checked");
    submitBtn.prop("disabled", !checked);
    // 把状态存到localStorage，转成字符串存（因为localStorage只能存字符串）
    localStorage.setItem("termsChecked", checked.toString());
  });
});

如果需要兼容老旧浏览器（比如IE7及以下），用Cookie版本 #

要是你得兼容特别老的浏览器，那换成Cookie就行，这里给你写好工具函数和完整代码：

// 读取Cookie的工具函数
function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length === 2) return parts.pop().split(";").shift();
}

// 设置Cookie的工具函数，支持设置过期时间
function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

$(document).ready(function() {
  var the_terms = $("#tandcCheck");
  var submitBtn = $(".submit");

  // 页面加载时恢复状态
  var isChecked = getCookie("termsChecked") === "true";
  the_terms.prop("checked", isChecked);
  submitBtn.prop("disabled", !isChecked);

  // 点击复选框时更新状态并保存到Cookie
  the_terms.click(function() {
    var checked = $(this).is(":checked");
    submitBtn.prop("disabled", !checked);
    setCookie("termsChecked", checked.toString(), 30); // 保存30天，可按需调整
  });
});

最后总结 #

你的场景下，LocalStorage是最优解，简单高效还不浪费资源；如果要兼容极老浏览器再考虑Cookie；Session完全没必要，因为这个状态纯粹是客户端需要的，和服务器没啥关系。

内容的提问来源于stack exchange，提问作者Tom Evans