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

Question

这是带有 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>

Answer 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');
 }
});