[英]Value from input field into array - Javascript, localstorage
我正在尝试将输入字段中的值插入到数组中，然后将其存储在localstorage中，但问题是每次插入新值时它都会替换旧值，而我希望将其添加到现有值中。 忍受我，如果这是一个愚蠢的问题，我是一个新手:)
<html>
<body>
<form>
<input id="textInput" type=text>
<input type=button onclick="myFunction()" value="Add Number"/>
</form>
<div id="output"><div>
<script>
function myFunction() {
var sports = ["soccer", "baseball"];
var newSport = document.getElementById('textInput').value;
sports.push(newSport)
window.localStorage.setItem("sportskey", sports);
document.getElementById('output').innerHTML = window.localStorage.getItem('sportskey');
}
</script>
</body>
</html>
您的sports变量是函数的本地变量，因此每次运行函数时都会重新初始化。 要修复它，请将声明移到函数外部。
另外，正如@RocketHazmat指出的那样，你只能存储一个字符串。 因此，您的新代码段应如下所示：
var sports = ["soccer", "baseball"]; //global scope
function myFunction() {
var newSport = document.getElementById('textInput').value;
sports.push(newSport)
window.localStorage.setItem("sportskey", JSON.stringify(sports)); // store as a string
document.getElementById('output').innerHTML = window.localStorage.getItem('sportskey');
}
问题在于变量的范围。 您的sports数组必须在myFunction（）函数之外声明
<script>
var sports = ["soccer", "baseball"];
function myFunction() {
var newSport = document.getElementById('textInput').value;
sports.push(newSport );
var myString= JSON.stringify(sports);
window.localStorage.setItem("sportskey", myString);
document.getElementById('output').innerHTML = window.localStorage.getItem('sportskey');
}
</script>
每次调用myFunction()时，您都在重新创建 sports数组。 每次添加新元素时，都是从头开始，添加第3个元素，忽略已添加的其他元素。
仅在localStorage中不存在时才创建该数组。
PS您无法在本地存储中存储数组，只能存储字符串。 您需要转换为/从JSON转换才能使其正常工作。
function myFunction() {
var sports = JSON.parse(window.localStorage.getItem('sportskey')) || ["soccer", "baseball"];
var newSport = document.getElementById('textInput').value;
sports.push(newSport)
var json = JSON.stringify(sports);
window.localStorage.setItem("sportskey", json);
document.getElementById('output').innerHTML = json;
}
演示： http ： //jsfiddle.net/EhH8C/
Aaargh ......我的回答太迟了;）
是的，每次调用该方法时都要重新创建数组，并且在从localStore加载项目时应该在存储项目时调用JSON.stringify（Array）和JSON.parse（string_from_localStore）。
但是你应该将stringify包装在try和catch块中，因为当json字符串格式不正确你的stringify方法崩溃函数并且它停止工作时，可能是某些原因。
var myFunc = function() {
//load it at first from localstorage
var sports = ["soccer", "baseball"];
var localSports = [];
try {
localSports = JSON.parse(window.localStorage.getItem('sportskey'));
if( localSports == null)
localSports = sports;
} catch(ex) {
console.log("something wrong");
localSports = sports; //fallback
}
var newSport = document.getElementById('textInput').value;
localSports.push(newSport); //this is an array
//insert the array with JSON.stringify so you can take it later out and rework with it
window.localStorage.setItem("sportskey", JSON.stringify(localSports));
output.innerHTML = window.localStorage.getItem('sportskey');
};
这是jsfiddle的链接：
使用Javascript将LocalStorage值插入表单输入字段
[英]Insert LocalStorage value into Form Input Field with Javascript
Javascript Localstorage：将输入值与本地存储在数组中的值进行比较
[英]Javascript Localstorage: Comparing input value with value stored in array in localstorage
如何在javascript数组中存储HTML输入字段中的值？
[英]How to store a value from an HTML input field in a javascript array?
Javascript - 将输入值的一部分保存到 localStorage
[英]Javascript - Save just a part of an input value to localStorage
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.