javascript - 在不依赖于浏览器的情况下保持浏览器中的输入值不变

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

这是一个使用 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));
}