页面刷新后保留选择复选标记

Posted 2023-05-08

【中文标题】页面刷新后保留选择复选标记

【英文标题】：Keep the selection check mark after page refresh

【发布时间】：2021-03-07 04:42:00

【问题描述】：

这是带有 href 的下拉功能的代码。当我在下拉列表中选择一个项目时，应该会出现一个刻度线图标。当我单击 href 时，页面加载并且选择消失了。有没有办法在重新加载后保持可见性状态？

$('#submitDropdown > a').click(function(e) 
  event.preventDefault();
  $('#submitDropdown  > a').removeClass('selected');
  $(this).addClass('selected');
);

$('#sort_descend > a').click(function(e) 
  event.preventDefault();
  $('#sort_descend  > a').removeClass('selected');
  $(this).addClass('selected');
);

#submitDropdown>a>.fas 
  visibility: hidden;


#submitDropdown>a.selected>.fas 
  visibility: visible;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="submitDropdown" class="dropdown-content " style="width: 180px;">
  <a  class="dropdown-item borderbottom " href="@Url.AddQueryString(Request.RawUrl, "Modes", "All" )">
    @T("All")  
    <i class="fas fa-check pull-right"></i> 
  </a>
  <a class="dropdown-item" href="@Url.AddQueryString(Request.RawUrl, "Modes", "Current" )">
    @T("Current") 
    <i class="fas fa-check pull-right"></i>
  </a>
  <a class="dropdown-item" href="@Url.AddQueryString(Request.RawUrl, "Modes", "For" )">
    @T("For") 
    <i class="fas fa-check pull-right"></i> 
  </a>
</div>

【问题讨论】：

是的，可以使用某种存储方式，您可以在其中存储检查的值并在页面加载时加载它。例如，sessionStorage 或 localStorage

我了解了存储的过程。如果可能，您能否为上述情况添加一个使用 sessionStorage 或 localStorage 的示例？

【参考方案1】：

您可以使用 localStorage 或 Session 存储： 下面是本地存储的实现。

$('#submitDropdown > a').click(function(e) 
  event.preventDefault();
  $('#submitDropdown  > a').removeClass('selected');
  $(this).addClass('selected');
  localStorage.setItem('submitDropdown', 'selected');
);

$('#sort_descend > a').click(function(e) 
  event.preventDefault();
  $('#sort_descend  > a').removeClass('selected');
  $(this).addClass('selected');
  localStorage.setItem('sort_descend', 'selected');
);

这将允许您为每个项目设置标志。 链接供您参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

刷新页面后，可以从本地存储读取后添加'selected'类。

$( document ).ready(function() 
 if(localStorage.getItem('submitDropdown') === 'selected')
   $('#sort_descend  > a').addClass('selected');
 
);

【讨论】：

我尝试了您的解决方案，但它似乎对我不起作用

一旦用户点击下拉菜单，该值将在 localStorage 中设置。因此，当您刷新页面时，您需要从 localStorage 中读取值：localStorage.getItem('submitDropdown') 并添加 'selected' 类

还是不行。这可能与我其余的代码有关。不过谢谢你的想法..

您能否为我的想法投票。提前致谢。

你的想法行得通。我不得不进行一些调整以使其正常工作。再次感谢