Question

我有一个简单的html页面，其中包含一个文本字段，要求输入用户名。我想保存用户输入的内容，在另一个页面上我想要检索该名称并说出hello +（用户名）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LocalStorage</title>
</head>
<body>
<form>
    <p>Enter your name</p>
    <input type="text">
    <button type="submit" value="submit">Submit</button>
</form>

</body>
</html>

，第二页是来自第一页的数据（通过localStorage）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>secondPage</title>
</head>
<body>

<h1>Hello </h1>

</body>
</html>

谢谢你。

Answer 1

我不确定这是否是家庭作业，但这应该让你开始。

它将涉及：

首先将数据存储到localStorage
然后将用户引导到第二页 - 最有可能通过window.location.href。
然后从localStorage中取出数据以显示在那里。

这是一个让你开始设置和获取数据的方法。

https://jsfiddle.net/em92zbod/

两个主要功能是：

window.localStorage.setItem("key", "value");
window.localStorage.getItem("key");

其中“key”是您要用于该值的任何标识符。

Answer 2

以下是使用sessionStorage建议的方法。

但是，您也可以使用相同的实现方法localStorage。即使您关闭浏览器，它们之间的唯一区别是localStorage将保留数据。在这种情况下，保存userName我觉得使用sessionStorage会更好。

<强> 1.HTML

<form action="2.html" onsubmit="callme()">
    <p>Enter your name</p>
    <input id="tbName" type="text">
    <button type="submit" value="submit">Submit</button>
</form>
<script>
    function callme(){
        var name = document.getElementById('tbName').value;
        sessionStorage.setItem('userName', name);
    }
</script>

<强> 2.HTML

<h1 id="welcome"> </h1>
<script>
    window.onload = function() {
        document.getElementById('welcome').innerText = "Hello, " + sessionStorage.getItem('userName');
    };
</script>

LocalStorage - 通过表单保存名称 - 显示在其他页面上

2 个答案: