Question

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

为了保持跨浏览器的兼容性，预计会避免浏览器依赖性。（例如：cookies，localStorage不是解决方案。）任何人都知道如何实现这一点。可以使用JavaScript，Jquery，但它应该与浏览器兼容。

Answer 1

这应该让你开始。您可以使用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>

Answer 2

Here是使用localStorage（除了IE＆lt; = 7之外的所有浏览器都可用）的快速演示，它依赖于this基本插件来序列化和恢复表单值。在输入中输入一些信息后尝试刷新页面：

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));
}

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

2 个答案: