在localStorage中存储阵列错误

jryankennedy 发表于 Dev

杰兰肯尼迪

我的代码中存在一个错误，该错误仅在重载时将最后一个对象保存在数组中。我有一种感觉，我的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";
    	}
    	
    }

狮子座

通过您提供的链接测试，您的所有功能都可以正常工作。页面加载后，它会成功从本地存储中检索数据（如果有）并显示在页面上。但是，全局数组变量accountsArray填充有从本地存储中检索到的数据。

您需要重新填充全局数组，否则当您调用全局数组时saveAccountData，它将保存该数组保存的所有内容，而实际上覆盖了您在本地存储中拥有的任何内容。要修复它，只需添加添加此代码块...

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。