Question

我有一个简单的表格，如下所示。我正在尝试存储所有input值。我一直在尝试此功能，如代码段所示，但它们没有存储。

我想存储搜索中所有输入的值，并希望将它们用于下一次搜索，即使用户使用空值或直到页面刷新（可能是前者）也击中了搜索。

非常感谢任何帮助或指导链接。 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

使用 localStorage 来存储不是 sessionStorage 的数据，例如

localStorage.setItem('key', Value)

Answer 2

不幸的是，Stackoverflow的代码片段不适用于测试存储功能-它是沙盒装的，因此无法获取/设置存储（localStorage，sessionStorage）。

但是，如果您在JSFiddle（或Codepen.io等）上进行尝试，那么您可以看到您的代码只需要进行少量修改（我添加了修改并注释了它们）：

strings.Split(csvInput, " ")

$(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 = ' ';
      }
    }
  })
});

有关 preventDefault（）的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

这是JSFiddle，但不会永远存在：https://jsfiddle.net/mukagergely/noc52y6u/

您可以在此处检查sessionStorage-有效

Answer 3

我猜最简单的方法是在variables函数中定义ready，然后用选定的值覆盖它们。例题：

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

仅当您不刷新当前站点时，此方法才有效

否则请使用@Nader答案https://thoughts-on-java.org/localized-data-hibernate/

如何存储用户输入直到页面刷新

3 个答案: