在浏览器中保持输入值不变，不依赖于浏览器

Keep input values unchange in browser without depending on browser

本文关键字：浏览器 依赖于 输入      更新时间：2023-09-26

用户在<input/>中输入的值需要在刷新页面后保持不变。

为了保持跨浏览器的兼容性，应该避免浏览器依赖。(例如:cookie, localStorage不是解决方案)任何人让我知道如何实现这一点。可以使用JavaScript, Jquery，但必须兼容浏览器

这应该是您的开始。您可以在URL中使用#符号向URL添加文本，而无需从页面导航。然后，当重新加载页面时，您可以将文本从URL中拉回来。

HTML和Javascript代码: 
Type something in the box below and then refresh the page:<br>
<input type="text" id="myTextBox" onkeyup="saveValue();">
<script type="text/javascript">
    var originalLocation = document.location.href;
    var myTextBox = document.getElementById('myTextBox');
    function saveValue(){
        document.location.href = originalLocation + "#" + myTextBox.value;
    }
    if(document.location.href.indexOf("#") > -1){
        myTextBox.value = document.location.href.split("#")[1];
    }
</script>

下面是使用localStorage(在除IE<=7以外的所有浏览器中都可用)的快速演示，它依赖于这个基本插件来序列化和恢复表单值。输入一些信息后尝试刷新页面:

HTML: 

<form>
  <label for="name">Name:
    <input type="text" id="name" name="name" />
  </label>
  <br/>
  <label for="email">Email:
    <input type="text" id="email" name="email" />
  </label>
</form>

JS: 

$(':input').on('input change keyup', function(){
  localStorage.formData = JSON.stringify($('form').values());
  console.log(localStorage.formData);
});
if(localStorage.formData){
  $('form').values(JSON.parse(localStorage.formData));
}
相关文章：