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

标签 javascript html

我有一个简单的 html 页面,其中包含一个要求输入用户名的文本字段。我想保存用户输入的内容,在另一个页面上我想检索该名称并打个招呼+(用户名)。

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

谢谢。

最佳答案

我不确定这是否是家庭作业,但这应该可以帮助您入门。

它将涉及:

  1. 首先将数据存入localStorage
  2. 然后将用户引导至第二页 - 很可能是通过 window.location.href。
  3. 然后将数据从 localStorage 中拉回以显示在那里。

这是一个让您开始设置和获取数据的 jsfiddle。

https://jsfiddle.net/em92zbod/

两个主要的功能是:

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

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

关于javascript - LocalStorage - 通过表单保存名称 - 在其他页面上显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35329180/

相关文章:

javascript - 将数据从 Excel/CSV 文件导入到 angularjs json 对象中

javascript - 如何在 javascript/jQuery 中获取父对象属性

javascript - jQuery - 多张图片的点击缩放功能

html - 仅使用 css 和 html 隐藏内容的键盘可访问性

html - html5中的canplaythrough事件到底是什么时候触发的?

javascript - 这个 JSON : 有什么问题

javascript - 从 window.open 浏览器返回 Android 应用程序

javascript - 在 Google Apps 脚本中通过引用在函数之间传递变量

asp.net - Iframe 内的站点,从父站点继承 CSS

javascript - 重置 CSS 过渡不起作用(过渡结束问题)