如何在文本框中设置从 Html5 中的 LocalStorage 获取的值答案

【问题标题】：How to set value in textbox getting from LocalStorage in Html5如何在文本框中设置从 Html5 中的 LocalStorage 获取的值
【发布时间】：2015-01-31 22:23:09
【问题描述】：

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

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

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

localStorage.getItem("Username");

但我想将此用户名显示到 pageLoad 上的文本框。任何人都可以帮助我如何做到这一点..？？

【问题讨论】：

出于安全原因，我会非常小心地将未加密的用户密码存储在本地存储中。用户名可能没问题，但密码似乎非常危险。如果该站点是通过 HTTP 而不是 HTTPS 提供的，那将特别糟糕，因为 MITM 可能会在页面中注入额外的 JS 来窃取密码。

标签： javascript jquery html sqlite local-storage

【解决方案1】：

试试这个：-

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

而不是 Usertextboxid,Passtextboxid 选择器 id 提供您在页面中使用的 id。

【讨论】：

【解决方案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");
}

其中 ids 应设置为实际值：

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

处理加载事件。

<!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>

【讨论】：

okk...你所做的是按钮点击事件。如何为 onpageLoad 执行此操作。我在页面加载时执行此操作，但显示未定义或显示为 null。
使用 onload 事件的处理方式几乎相同。
无需在页面加载时设置项目。因为我已经通过在文本框中输入来设置它。我只想获取存储在本地数据库中的项目，然后在文本框中显示。但是当我检索项目时，它显示为空。