如何在HTML5中从Html5的LocalStorage获取文本框中的值

Question

在我的html5页面中，我使用以下代码将用户输入值从文本框中保存到localstorage：

localStorage.setItem("Username",uname);
localStorage.setItem("Password",password);

这工作正常，我可以将数据保存到本地存储。现在我想从本地存储中获取数据，然后在文本框中显示。 我知道如何获取数据，我必须使用

localStorage.getItem("Username");

但是我想将此用户名显示在pageLoad的文本框中。 有人可以帮我怎么做吗？

Answer 1

尝试这个 ：-

$('#Usertextboxid').val(localStorage.getItem("Username"));
$('#Passtextboxid').val(localStorage.getItem("Password"));

代替Usertextboxid ， Passtextboxid选择器ID给出了您在页面中使用的ID。

Answer 2

用于用户名输入的纯JavaScript示例。

处理了Onclick事件。

document.getElementById("save").addEventListener("click", save, false);
document.getElementById("restore").addEventListener("click", restore, false);

function save() {
  localStorage.setItem("username", document.getElementById('username').value);
}

function restore() {
  document.getElementById('username').value = localStorage.getItem("username");
}

应将id设置为实际值：

<input id="username" type="text"></input>
<input id="save" type="button" value="save"></input>
<input id="restore" type="button" value="restore"></input>

处理Onload事件 。

<!DOCTYPE html>
<html>
<head>
<script>
function startup() {
    //
    // Initialize local storage
    //
    localStorage.setItem("username", "Hello, world!");

    //
    // Get preinitialized value from local storage
    //
    document.getElementById('username').value = localStorage.getItem("username");
}
</script>
</head>
<body onload="startup();">
<input id="username" type="text"></input>
</body>
</html>