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

Question

У меня есть простая форма, как показано ниже. Я пытаюсь сохранить все значения input. Я пробовал это, как во фрагменте, но они не сохраняются.

Я хочу сохранить значения всех входных данных при поиске и использовать их для следующего щелчка поиска, даже если пользователь нажимает на поиск с пустым значения или до страницы refre sh (возможно, прежний).

Любая помощь или руководящие ссылки очень приветствуются. TIA!

$(document).ready(function() {
  $('#submit').on('click', function() {
    var lengthValue = $("#wordlength").val();
    var wordValue = $("#word").val().replace(/ /g, '-');
    
    if (wordValue == '') {
      wordValue = sessionStorage.getItem("data");
      if (wordValue == null) {
        wordValue = ' ';
      }
    }
    
    var postionValue = $("#position").val();
    var wordTypeValue = $("#wordtype").val();
    var wordSearchValue = $("#mainword_search").val();
    sessionStorage.setItem('wordtype', wordTypeValue);
    
    if (wordTypeValue == '') {
      wordTypeValue = sessionStorage.getItem('wordtype');
      if (wordTypeValue == null) {
        wordTypeValue = ' ';
      }
    }

    sessionStorage.setItem('length', lengthValue);
    if (lengthValue == '') {
      lengthValue = sessionStorage.getItem('length');
      if (lengthValue == null) {
        lengthValue = ' ';
      }
    }

    sessionStorage.setItem('position', postionValue);
    if (postionValue == '') {
      postionValue = sessionStorage.getItem('position');
      if (postionValue == null) {
        postionValue = ' ';
      }
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" class="form-control" id="wordlength" placeholder="All" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))">
<select class="form-control" id="wordtype" name="wordtypesearch">
  <option value="">word</option>
  <option value="old">old</option>
  <option value="new">new</option>
</select>
<select class="form-control" id="position" name="positionsearch">
  <option value="containing">Containing</option>
  <option value="starting">Starting With</option>
  <option value="ending">Ending With</option>
</select>
<input type="text" class="form-control" id="word" placeholder="Text....">
<input type="submit" value="Search" id="submit" class="submit px-3">

Answer 1

К сожалению, фрагмент Stackoverflow не подходит для тестирования функций хранилища - он помещен в "песочницу" и поэтому не может получить / установить хранилища (localStorage, sessionStorage).

Но, если вы попробуете его JSFiddle (или Codepen.io, et c.), Тогда вы можете видеть, что ваш код просто нуждается в небольшой модификации (я добавил модификации и прокомментировал их):

$(document).ready(function() {

  // add an argument to the click function - I added 'e' for 'event'
  $('#submit').on('click', function(e) {
    // use e.preventDefault() to prevent the submit button doing
    // anything BEFORE your code
    e.preventDefault();
    var lengthValue = $("#wordlength").val();
    var wordValue = $("#word").val().replace(/ /g, '-');

    if (wordValue == '') {
      wordValue = sessionStorage.getItem("data");
      if (wordValue == null) {
        wordValue = ' ';
      }
    }

    var postionValue = $("#position").val();
    var wordTypeValue = $("#wordtype").val();
    var wordSearchValue = $("#mainword_search").val();
    sessionStorage.setItem('wordtype', wordTypeValue);

    if (wordTypeValue == '') {
      wordTypeValue = sessionStorage.getItem('wordtype');
      if (wordTypeValue == null) {
        wordTypeValue = ' ';
      }
    }

    sessionStorage.setItem('length', lengthValue);
    if (lengthValue == '') {
      lengthValue = sessionStorage.getItem('length');
      if (lengthValue == null) {
        lengthValue = ' ';
      }
    }

    sessionStorage.setItem('position', postionValue);
    if (postionValue == '') {
      postionValue = sessionStorage.getItem('position');
      if (postionValue == null) {
        postionValue = ' ';
      }
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" class="form-control" id="wordlength" placeholder="All" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))">
<select class="form-control" id="wordtype" name="wordtypesearch">
  <option value="">word</option>
  <option value="old">old</option>
  <option value="new">new</option>
</select>
<select class="form-control" id="position" name="positionsearch">
  <option value="containing">Containing</option>
  <option value="starting">Starting With</option>
  <option value="ending">Ending With</option>
</select>
<input type="text" class="form-control" id="word" placeholder="Text....">
<input type="submit" value="Search" id="submit" class="submit px-3">

Подробнее о protectDefault () : https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Вот JSFiddle, но он не будет там вечно: https://jsfiddle.net/mukagergely/noc52y6u/

Вы можете проверить сессию там - она ​​работает

Answer 2

Полагаю, самый простой подход - определить variables в функции ready, а затем просто перезаписать их выбранными значениями. Пример:

$(document).ready(function() {
  var postionValue;
  $('#submit').on('click', function(e) {
    ......
    postionValue = $("#position").val();
    ......
  }
  ......
  USE IT IN ANOTHER FUNCTION
  ......
}

ЭТОТ ПОДХОД РАБОТАЕТ ТОЛЬКО, ЕСЛИ ВЫ НЕ ОБНОВЛЯЕТЕ ТЕКУЩИЙ САЙТ

В противном случае используйте @Nader ответ Ответ

Answer 3

Используйте localStorage , чтобы хранить данные не sessionStorage , например:

localStorage.setItem('key', Value)