入力フィールドから配列に値を挿入してローカルストレージに保存しようとしていますが、問題は、新しい値を挿入するたびに古い値が置き換えられ、既存の値に追加されることです。それがばかげた質問なら私に耐えなさい、私は初心者です:)
<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>
Aaargh ...私の答えには遅すぎます;）
はい、メソッドが呼び出されるたびに配列を再作成します。アイテムの保存時にJSON.stringify（Array）を呼び出し、localStoreからアイテムをロードするときにJSON.parse（string_from_localStore）を呼び出す必要があります。
ただし、stringifyをtry and 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へのリンクは次のとおりです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加