Сохранить входное значение, даже если оно пустое

Question

I нашел решение , которое сохраняет значение поля фильтра поиска по датам после обновления страницы.

Мне также нужно убедиться, что пустое значение можно сохранить.

Когда пользователь нажимает кнопку «Очистить» и очищает окно поиска, мне нужно установить значение фильтра пустым. Поэтому, когда страница обновляется, фильтр становится пустым.

Вот входные данные:

<input type="search" id="searchFilter" onkeyup='saveValue(this);' />

А вот JavaScript:

document.getElementById("searchFilter").value = getSavedValue("searchFilter"); // set the value to this input

//Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e){
  var id = e.id;  // get the sender's id to save it . 
  var val = e.value; // get the value. 
  localStorage.setItem(id, val); // Every time user writing something, the 
  localStorage's value will override . 
}

//get the saved value function - return the value of "v" from localStorage. 
function getSavedValue(v){
  if (!localStorage.getItem(v)) {
    return ""; // You can change this to your defualt value. 
  }
  return localStorage.getItem(v);
}

Вот событие нажатия кнопки очистки:

$('.clearFilters').on('click', function()
{
  $('#searchFilter').val("");
  $('#example1').DataTable().search('').draw();
});    

Как указано, при обновлении страницы последнее значение, введенное при поиске, сохраняется.

Однако, если пользователь очищает фильтр и обновляет страницу, в фильтре снова появляется последнее введенное значение.

Фильтр должен быть пустым, если кнопка очистки была нажата, и страница обновляется.

Я предполагаю, что мне нужно вызвать функцию saveValue из события нажатия кнопки очистки, но не был уверен, как.

Answer 1

Я смог решить свою проблему, запустив keyup, установив пустое значение в событии кнопки очистки фильтра:

$('.clearFilters').on('click', function()
{
  $('#searchFilter').val(""); // still needed to make sure the value gets cleared
  $('#example1').DataTable().search('').draw();
  $('#searchFilter').keyup().val(""); // this is what I added to trigger the keyup
});