Сохраняйте флажок выбора после обновления страницы

#jquery #css #asp.net-mvc #razor

Вопрос:

Это код для выпадающей функции с 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>

1. да, это возможно с помощью какого-либо хранилища, где вы сохраняете проверенное значение и загружаете его при загрузке страницы. Например, sessionStorage или localStorage

2. Я понял процесс хранения. Если возможно, не могли бы вы добавить пример для приведенного выше случая, используя sessionStorage или localStorage?

Ответ №1:

Вы можете использовать localStorage или хранилище сеансов: ниже приведена реализация для локального хранилища.

 $('#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

После обновления страницы вы можете добавить «выбранный» класс после чтения из локального хранилища.

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

1. Я попробовал ваше решение, но, похоже, оно у меня не работает

2. Как только пользователь нажмет на выпадающий список, значение будет установлено в localStorage. Итак, когда вы обновляете страницу, вам нужно прочитать значение из localStorage: localStorage.GetItem(‘submitDropdown’) и добавить класс ‘selected’

3. это все равно не работает. Это может быть связано с остальной частью моего кода. Хотя спасибо за идею..

4. Не могли бы вы, пожалуйста, поддержать мой ответ за идею. Заранее спасибо.

5. Ваша идея работает. Мне пришлось внести некоторые изменения, чтобы заставить его работать. Еще раз спасибо