gpt4 book ai didi

javascript - 通过本地存储增加值(value)

转载 作者:行者123 更新时间:2023-12-02 18:42:22 25 4
gpt4 key购买 nike

我正在尝试制作一个页面,用户可以在四个不同的文本框中将数据输入到四个不同的值中,并且可以使用本地存储来存储这些值,然后当用户刷新页面或在中打开它时新选项卡中,之前输入的值仍然存在。任何关于如何做到这一点的建议都非常棒!这是我目前拥有的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>Storing Data</title>
<meta name="description" content="" />
<meta name="author" content="Alan Sylvestre" />

<style>
h1 {
background-color: #000000;
color: #C00000;
padding: 10 px;
padding: 10 px;
text-align: center;
}

</style>

<script>
function storageValue() {
var uno = document.getElementById("storage1");
var duck = uno.value
var dos = document.getElementById("storage2");
var duckie = dos.value
var tres = document.getElementById("storage3");
var rubberDuck = tres.value
var quatro = document.getElementById("storage4");
var rubberDuckie = quatro.value
alert("Your stored values are: " + duck + "," + duckie + "," + rubberDuck + "," + rubberDuckie);
localStorage.setItem(duck, duckie, rubberDuck, rubberDuckie);
checkLocalStorage();
}

function checkLocalStorage() {
var div = document.getElementById("storageDiv");
div.innerHTML = localStorage["duck", "duckie", "rubberDuck", "rubberDuckie"];
}

</script>
</head>

<body align="center" style="background-color:red;">
<div>
<header>
<h1>Local Storage</h1>
</header>
<input type="text" id="storage1" size="40" placeholder="Please enter a value">
<input type="text" id="storage2" size="40" placeholder="Please enter a value">
<input type="text" id="storage3" size="40" placeholder="Please enter a value">
<input type="text" id="storage4" size="40" placeholder="Please enter a value">
<br>
<br>
<input type="button" id="addValue" value="Store Input Values" onclick='storageValue();'>
<div id="storageDiv"></div>
<nav>
<p>
<a href="/">Home</a>
</p>
<p>
<a href="/contact">Contact</a>
</p>
</nav>

<div>

</div>

<footer>
<p>
&copy; Copyright by Alan Sylvestre
</p>
</footer>
</div>
</body>
</html>

最佳答案

这是一个 fiddle :http://jsfiddle.net/howderek/T5PqU/

像数组一样使用 localStorage 来存储值:localStorage["duckie"] = duckie

另外,你不能这样做:div.innerHTML = localStorage["duck", "duckie", "rubberDuck", "rubberDuckie"];

这是更新后的代码:

JS

function storageValue() {
var uno = document.getElementById("storage1");
var duck = uno.value;
localStorage["duck"] = duck;
var dos = document.getElementById("storage2");
var duckie = dos.value;
localStorage["duckie"] = duckie;
var tres = document.getElementById("storage3");
var rubberDuck = tres.value;
localStorage["rubberDuck"] = rubberDuck;
var quatro = document.getElementById("storage4");
var rubberDuckie = quatro.value;
localStorage["rubberDuckie"] = rubberDuckie;
alert("Your stored values are: " + duck + "," + duckie + "," + rubberDuck + "," + rubberDuckie);
localStorage.setItem(duck, duckie, rubberDuck, rubberDuckie);
checkLocalStorage();
}

function checkLocalStorage() {
var div = document.getElementById("storageDiv");
div.innerHTML = "The current values are: " + localStorage["duck"] + ", " + localStorage["duckie"] + ", " + localStorage["rubberDuckie"] + ", " + localStorage["rubberDuckie"];
}
checkLocalStorage();

关于javascript - 通过本地存储增加值(value),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16720216/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com