使用 localStorage 填充表单

Question

我正在构建一个 web 应用程序，其中有一个设置面板。我有一个将数据从表单保存到 localStorage 的代码，但是如果有一些数据保存到 localStorage，如何让它在页面加载时自动填充表单？

这是我的表单代码：

<label for="serveri"> Server: </label> 
<input type='text' name="server" id="saveServer"/> 
<button onclick="save_data()" type="button" value="Save" id="Save" data-theme="a">Save</button> 

<script> function save_data()
{ var input = document.getElementById("saveServer");
localStorage.setItem("server", input.value); 
var storedValue = localStorage.getItem("server"); } 
</script> 

Answer 1

您需要做的就是添加一个ready 方法来加载数据。

$(document).ready(function() {
  $(input[name=server]).val(localStorage.getItem("server"));
});

或者非JQuery的答案。

function save_data() {
  // Save functionality here...
}

function load_data() {
  var input = document.getElementById("saveServer");
  input.value = localStorage.getItem("server");
}

load_data();

只需确保您的 form 在任何用于填充它的 JavaScript 执行之前就存在。

这是一个有效的example。