页面刷新JavaScript，Spring Boot时如何保持复选框处于选中状态？

Posted 2023-05-08

【中文标题】页面刷新JavaScript，Spring Boot时如何保持复选框处于选中状态？

【英文标题】：How to keep checkbox checked when page refresh JavaScript, Spring Boot?

【发布时间】：2021-11-01 15:26:28

【问题描述】：

我正在使用 Spring Boot 开发电子商务网络应用程序。因此，根据价格、折扣、尺寸等各种选项，产品过滤器有多个复选框。 下面是我的 javascript 函数，用于在选中类别复选框时更新产品列表页面。

function updatelisting(cid)
  debugger
  var checkboxid = 'checkbox'+cid;
  var c = [];
  $('[id="'+checkboxid+'"]').each(function(i,e)
    if($(e).is(':checked'))
      c.push(e.value);
    
  )  
  var category = c.join();
  var url = "api/searchbyfilter";
  $.post(url,
    category : category,
  , function(data, status) 
    if (data.status == "OK") 
      if (data.statusCode == 1) 
          var list = data.response;
          if(list.length > 0)
            for(var i = 0; i < list.length; i++)
              window.location.href = "shopitems?type="+list[i].product.category.categoryid+"";
              selecttab(<%=pagelength%>);
            
          else
            alert("No product found");
           
         else 
          var error = data.responseMessage;
        swal(error, "", "error");
      
     else 
      var error = data.responseMessage;
        swal(error, "", "error");
      
  );
 

如何在页面刷新或重新加载后保持复选框处于选中状态？在 URL 中传递多个值时如何编写查询参数。请提出解决方案。

【问题讨论】：

也许改用本地存储？ developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

您必须将复选框状态存储在服务器上或浏览器中的 sessionStorage 或 localStorage 中。这取决于您的具体用例。

你有什么例子吗？

【参考方案1】：

您可以将复选框状态（所有过滤器）保存在您提到的 URL 中。在使用此解决方案的电子商务项目中，因为您可以与其他人共享链接，并且您应该保存您选择的过滤器

example.com?checkbox1=value&checkbox2=value&...