个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试打印页面上文本框中的值。
单击按钮后，值会显示在页面上，但只显示一瞬间。
如何才能使这些值保留在页面上？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>Local Storage - JavaScript <h2>
<fieldset>
<legend>Insert Data</legend>
<input id="inpKey" type="text" placeholder="Enter key...">
<input id="inpValue" type="text" placeholder="Enter Value...">
<button type="button" id="btnInsert">Insert Data</button>
</fieldset>
<fieldset>
<legend>Local Storage</legend>
<div id="lsOutPut"></div>
</fieldset>
<script src="action.js">
const inpKey = document.getElementById("inpKey");
const inpValue = document.getElementById("inpValue");
const btnInsert = document.getElementById("btnInsert");
const lsOutPut = document.getElementById("lsOutPut");
btnInsert.onclick = function(){
const key = inpKey.value;
const value = inpValue.value;
if(key && value) {
localStorage.setItem(key, value);
location.reload();
}
for(let i = 0; i < localStorage.length; i++){
const keyx = localStorage.key(i);
const value = localStorage.getItem(keyx);
lsOutPut.innerHTML += `${keyx}: ${value}</br> `
}
}
</script>
</body>
</html>
最佳答案
在您的代码中，您有 location.reload()，这就是它重新加载页面的原因，不确定为什么您在那里，但其原因是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>Local Storage - JavaScript <h2>
<fieldset>
<legend>Insert Data</legend>
<input id="inpKey" type="text" placeholder="Enter key...">
<input id="inpValue" type="text" placeholder="Enter Value...">
<input type="button" id="btnInsert" value="Insert Data"/>
</fieldset>
<fieldset>
<legend>Local Storage</legend>
<div id="lsOutPut"></div>
</fieldset>
<script>
const inpKey = document.getElementById("inpKey");
const inpValue = document.getElementById("inpValue");
const btnInsert = document.getElementById("btnInsert");
const lsOutPut = document.getElementById("lsOutPut");
btnInsert.onclick = function(){
const key = inpKey.value;
const value = inpValue.value;
if(key && value) {
localStorage.setItem(key, value);
}
for(let i = 0; i < localStorage.length; i++){
const keyx = localStorage.key(i);
const value = localStorage.getItem(keyx);
lsOutPut.innerHTML += `${keyx}: ${value}</br> `
}
}
</script>
</body>
</html>
关于javascript - 本地存储的困境，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60506820/
26
4
0
我正在使用 OneWayToSource绑定(bind)，它似乎总是将我的源属性设置为空。为什么呢？这给我带来了麻烦，因为我需要源属性中目标属性的值而不是空值。 这是我的代码: MyViewModel
我有一个实例变量属性，它被声明和实例化，如下所示: $self->{properties}{$key1} = $value; 我的理解是这将声明属性字段，并将其设置为包含一个键值对的哈希原语。 我正
我正在尝试检查给定的数字是否是质数。首先采用试分割法。但该程序的行为很奇怪。这是我使用的。 int no; no = Integer.parseInt(jTextField1.getText());
我正在使用 NSUserDefaults使一个对象在多个 UIViewController 之间保持同步UITabbarController 中使用的 s .为此，我正在实现以下 - (void)vi
考虑以下 Java 方法: public Boolean compare(String val1, String val2) { return val1.length() > 0 && val
我有一个问题...假设我有一个包含城市名称的表。像这样: id name 1 Los Angeles 2 Madrid 我有一张用户表: uid username locationid
我无法理解这个问题。该代码非常基本，但它的行为却出乎意料。该代码是例程的简化版本，用于从每日数据库中提取每月第 15 天的数据并将其保存到单独的文件中。哪里有问题 ？第一个 cout 打印输入外部 i
我在 中使用大背景标签，我想制作一个宽度为 960px 的容器 div。我希望容器 div 位于从顶部向下 15px 的位置，我想我必须使用 position:absolute。我的困境是；容器内的
我遇到了一个难题。我有一个 hashedX 字段，它是一个散列值/加盐值，按照惯例，加盐值保存在 mysql 数据库的同一行中。 hashedX saltX ------ ---
类 java.io.Reader 和 java.io.InputStreamReader 都有具有完全相同签名的读取方法 public int read(char[] charbuf, int off
我有一个包含多个 C# 项目的 C# 解决方案。我打算在其中添加日志记录。此日志记录应该在所有项目中可用，并且最好使用带有滚动文件日志的 log4Net。 在上述前提下，我可以想到两种方法。 在解决方
我开始学习Python，目前我非常喜欢它。但是，如果你能帮我回答几个问题，这些问题一直困扰着我，我找不到任何明确的答案: 就语言兼容性而言，Python 的 C 实现(来自 python.org 的主
我正在尝试使用 AVAssetWriter 将 CGImages 写入文件以从图像创建视频。 我已经让它在模拟器上以三种不同的方式成功运行，但在运行 iOS 4.3 的 iPhone 4 上，每种方法
我需要对一个想法进行建模，可以将其分解并考虑如下: 图书详细信息 图书价格 这里的问题是您可以为书籍设置许多价格，并且这些价格可能会发生变化。这是一个例子 图书详细信息: --------------
我有一个表，其中的行包含名为 MySubId 的列。此列中的值可以重复。我想找到 MySubId 值和出现次数最多的 MySubId 值的行数。 我有以下查询: SELECT MySubId, COU
我有两个具有多对多关系的类，因此我在它们之间创建了一个联接表(一个非常经典的示例!) 在java+hibernate中我想知道哪种方式更好？使用hibernate多对多注释在这两个类之间有多对多关系吗
我正在尝试创建一个 Android 应用程序来完成以下任务:它通过短信向一组收件人(存储在数组中的数字)发送初始调查问题。然后，对于收到的每个响应，它都会向该参与者发送该系列中的下一个问题。这是我做过
这里有一个关于 IncludeEventHandler 的有趣问题。 我正在开发一个基于 Spring 的应用程序，该应用程序使用具有单独投资组合站点的不同供应商的速度。我让供应商通过向他们提供存储在
我真的无法理解事件和委托(delegate)的概念。我知道委托(delegate)是持有方法引用的对象，可以调用具有相同返回类型和参数的方法，但事件到底是什么？ 如果我需要使用事件来制作一个简单的计算
在我正在处理的一个项目中，我有一个扩展 JFrame 的主类(名为 TrackWin)。在此框架中，我使用 JTabbedPane。 用户可以从菜单栏在 Pane 中创建新选项卡。每当发生这种情况时，
我是一名优秀的程序员,十分优秀！