LocalStorage阵列
伙计们帮我处理这段代码。这样做的目的是将新输入保存在字符串中，并使用HTML显示它们。每次我添加一个新的HTML都会显示它，如果我重新加载页面，项目仍然会显示，第一个getItem方法和如果我再次重新加载仍然工作，但这里有问题。在我重新加载页面并在string中插入一个新元素之后，它将显示lates的输入，并从其他会话中删除这些输入。
如果我现在插入：“1”、“2”、“3”--如果我重新加载，我将显示“1、2、3”
我怎样才能做到这一点？
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<button onclick="reloadd()">Reload</button>
<button onclick="clearF()">Clear</button>
<input id="valoare">
<button id="adauga" onclick="adauga()">+</button>
<button onclick="nrElemente()">ElemNr?</button>
<script>
var cars = [];
var two = "kes";
document.getElementById("result").innerHTML = localStorage.getItem("array1");
function clearF() {
window.localStorage.clear();
location.reload();
}
function adauga() {
var x = document.getElementById('valoare').value;
cars.push(x);
localStorage.setItem("array1", cars);
document.getElementById("result").innerHTML = localStorage.getItem("array1");
}
function reloadd() {
location.reload();
}
function nrElemente() {
alert(localStorage.length);
}
</script>
</body>
</html>回答 3
Stack Overflow用户
发布于 2016-10-01 23:15:59
您的代码无法工作，因为您没有将数组存储到任意位置。要将数组保存到localStorage中，可以使用：
localStorage.setItem("cars", JSON.stringify(cars));然后，不要这样做：
var cars = [];您将像这样加载您的汽车阵列：
var cars = localStorage.getItem("cars");
cars = (cars) ? JSON.parse(cars) : [];这是在检查localStorage对象是否包含一个名为cars的array。如果它这样做了，它将解析该字符串并返回存储的cars数组，如果没有，它将把cars数组设置为一个新的空数组。
在这里，我已经修复并整理了您的代码：
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<button onclick="reloadd()">Reload</button>
<button onclick="clearF()">Clear</button>
<input id="valoare" />
<button id="adauga" onclick="adauga()">+</button>
<button onclick="nrElemente()">ElemNr?</button>
<script type="text/javascript">
var array1 = localStorage.getItem("array1");
array1 = (array1) ? JSON.parse(array1) : [];
var two = "kes";
document.getElementById("result").innerHTML = localStorage.getItem("array1");
function clearF() {
window.localStorage.clear();
location.reload();
}
function adauga() {
var x = document.getElementById("valoare").value;
array1.push(x);
localStorage.setItem("array1", JSON.stringify(array1));
document.getElementById("result").innerHTML = localStorage.getItem("array1");
}
function reloadd() {
location.reload();
}
function nrElemente() {
alert(localStorage.length);
}
</script>
</body>
</html>此外，将JavaScript事件和函数放置在HTML中也被认为是错误的做法。通过在脚本元素/ JS文件中放置all (或至少最多)，尽量将HTML、CSS和JS分隔开来。
祝你好运万事如意。
Stack Overflow用户
发布于 2016-10-01 22:26:24
在每次加载页面时，您都要创建一个空数组，当您添加到数组中时，您可以存储该数组，但永远不要将cars数组连接到已经存储的数据。
试着改变
var cars =[];至
var localData = localStorage.getItem("array1");
// if localData not undefined then parse that as cars array, otherwise is empty array
var cars = localData ? JSON.parse(localData) : [];当您要存储cars数组时，更改为：
localStorage.setItem("array1",JSON.stringify(cars));Stack Overflow用户
发布于 2016-10-01 23:24:09
您的代码存在一些主要问题，这是一个固定的版本：
<script type="text/javascript">
var cars = [];
try {
cars = JSON.parse(localStorage.getItem("array1"));
} catch (err) {}
var two = "kes";
document.getElementById("result").innerHTML = cars;
function clearF() {
window.localStorage.clear();
location.reload();
}
function adauga() {
var x = document.getElementById('valoare').value;
cars.push(x);
localStorage.setItem("array1", JSON.stringify(cars));
document.getElementById("result").innerHTML = localStorage.getItem("array1");
}
function reloadd() {
location.reload();
}
function nrElemente() {
alert(localStorage.length);
}
</script>https://stackoverflow.com/questions/39811896
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号