javascript - 在 localStorage 错误中存储数组

Question

我的代码中有一个错误，它只在重新加载时将最后一个对象保存在数组中。我感觉我的 addAccount() 函数没有正确保存或插入数据。其他一切正常。在我的控制台中，它显示数据正在插入到数组中，但是当我刷新时，我只得到最后保存的对象。 我不知道该怎么办。

    // The list of accounts array.
    var accountsArray = [];
    function addAccount() {
    	// Take fields and put user data into varables.
    	var accountName = document.getElementById('accountName').value;
        var accountBalance = document.getElementById('accountBalance').value;
        var accountType = document.getElementById("accountType");
    	var accountTypeSelected = accountType.options[accountType.selectedIndex].text;
    	var accountCurrency = document.getElementById("accountCurrency");
    	var accountCurrencySelected = accountCurrency.options[accountCurrency.selectedIndex].text;
    	
    	var temporaryObject = {
    		'accountName': accountName,
    		'accountBalance': accountBalance,
    		'accountTypeSelected': accountTypeSelected,
    		'accountCurrencySelected': accountCurrencySelected
    	};
    	
    	accountsArray.push(temporaryObject);
    	console.log(accountsArray);
    	
    	saveAccountData();
        showAccountsArray();
    }
    function saveAccountData() {
    	localStorage.setItem('accountsArray', JSON.stringify(accountsArray));
    }
    function showAccountsArray() {
    	//var accountsLocalStorage = JSON.parse(localStorage['accountsArray']);
    	if (localStorage.getItem("accountsArray") === null) {
    		document.getElementById("getStarted").style.visibility="visible";
    		document.getElementById("balanceToolbarName").style.visibility="hidden";
    		document.getElementById("accountsMainList").style.visibility="hidden";
    	} else {
    	
    		var accountsLocalStorage = JSON.parse(localStorage['accountsArray']);
    		console.log(accountsLocalStorage);
    		
    		var accountInfo = '';
    		var i = 0;
    		while (i < accountsLocalStorage.length) {
    			accountInfo += '<li class="swipeout"><a href="#" class="item-link"><div class="swipeout-content item-content"><div class="item-inner"><div class="item-title">' + accountsLocalStorage[i].accountName + '</div><div class="item-after">$' + accountsLocalStorage[i].accountBalance + '</div></div></div><div class="swipeout-actions-left"><a href="#" class="action1">Clear</a></div><div class="swipeout-actions-right"><a href="#" class="action1">Delete</a></div></a></li>';
    			document.getElementById("accountsList").innerHTML = accountInfo;
    	       i++;
    		}
    		
    		document.getElementById("getStarted").style.visibility="hidden";
    		document.getElementById("balanceToolbarName").style.visibility="visible";
    		document.getElementById("accountsMainList").style.visibility="visible";
    	}
    	
    }

*

Answer 1

根据您提供的链接测试，您的所有功能均正常工作。当页面加载时，它会成功地从本地存储中检索数据(如果有)并显示在页面上。但是，全局数组变量 accountsArray 填充了从本地存储中检索到的数据。

您需要重新填充全局数组，否则当您调用 saveAccountData 时，它将保存数组包含的任何内容，这确实会覆盖您在本地存储中的任何内容。要修复它，只需添加此代码块...

$(function(){
    var data = localStorage.getItem("accountsArray");

    if(data != null)
        accountsArray = JSON.parse(localStorage.getItem("accountsArray"));
});