localstorage保存一个空对象

时间:2018-02-16 11:24:53

标签: javascript

<table id="products" class="table table-dark table-hover" style="text-align: center;width:45%;margin: 4px">
				<tr>
					<th>Car</th>
					<th>Model</th>
					<th>Price</th>
					<th>Basket</th>
				</tr>
				<tr onclick="buyProduct(this)">
					<td>Mercedes_Benz</td>
				</tr>
				<tr onclick="buyProduct(this)">
					<td>BMW</td>
				</tr>
				<tr onclick="buyProduct(this)">
					<td>Toyota</td>
				</tr>
			</table>
			<table id="basket" class="table table-dark table-hover" style="text-align: center;width:45%;margin: 4px"></table>

我有一个存储数据到localstorage的问题,我想保存点击到localstorage并onload得到它但在本地存储它显示空对象,这是代码,谢谢你提前

var row = document.getElementsByTagName('tr');
var prod = document.getElementById('products');
var bas = document.getElementById('basket');
var k = 0;
var arr = [];
function buyProduct(x) {
	arr[k] = x;
	localStorage.setItem("sold"+k, JSON.stringify(arr))
	
	x.remove();
	x.removeAttribute('onclick')
	bas.append(x);
	k++;
	
}
window.onload = function() {
	var stored;
	if(localStorage) {
		for(var i = 0; i < localStorage.length; i++) {
			stored = localStorage.getItem("sold"+i);
			console.log(JSON.parse(stored))
		}	
	}
}

2 个答案:

答案 0 :(得分:0)

当您调用onclick="buyProduct(this)"时,您需要保存数组中的DOM <tr>元素,而不是其关联值。

JSON.stringify()函数找不到这些元素的可枚举属性,因此保存了一个空对象。

如果您确实想要行中<td>的内容,可以使用此内容:

arr.push(this.querySelector('td').textContent);

注意:请注意使用push添加到数组的末尾,而不是保持自己的变量跟踪数组长度的错误操作。

答案 1 :(得分:-2)

尝试使用$ g++ --version g++ (GCC) 6.4.0 $ g++ -std=c++11 -o testRemove testRemove.cc $ ./testRemove Initial tree: +---A +-+-B | +---C +-+-D | | +---E | +-+-F +-+-G | | +---H | | +-+-I | +-+-J | | +---K | +-+-L --+-M | +---N | +-+-O | | +---P | +-+-Q | | | +---R | | +-+-S +-+-T | +---U | +-+-V +-+-W | +---X +-+-Y +---Z Remove node '?': failed +---A +-+-B | +---C +-+-D | | +---E | +-+-F +-+-G | | +---H | | +-+-I | +-+-J | | +---K | +-+-L --+-M | +---N | +-+-O | | +---P | +-+-Q | | | +---R | | +-+-S +-+-T | +---U | +-+-V +-+-W | +---X +-+-Y +---Z Remove node 'K': done +---A +-+-B | +---C +-+-D | | +---E | +-+-F +-+-G | | +---H | | +-+-I | +-+-J | +---L --+-M | +---N | +-+-O | | +---P | +-+-Q | | | +---R | | +-+-S +-+-T | +---U | +-+-V +-+-W | +---X +-+-Y +---Z Remove node 'I': done +---A +-+-B | +---C +-+-D | | +---E | +-+-F +-+-G | | +---H | +-+-J | +---L --+-M | +---N | +-+-O | | +---P | +-+-Q | | | +---R | | +-+-S +-+-T | +---U | +-+-V +-+-W | +---X +-+-Y +---Z Remove node 'H': done +---A +-+-B | +---C +-+-D | | +---E | +-+-F +-+-G | +-+-J | +---L --+-M | +---N | +-+-O | | +---P | +-+-Q | | | +---R | | +-+-S +-+-T | +---U | +-+-V +-+-W | +---X +-+-Y +---Z Remove node 'J': done +---A +-+-B | +---C +-+-D | | +---E | +-+-F +-+-G | +---L --+-M | +---N | +-+-O | | +---P | +-+-Q | | | +---R | | +-+-S +-+-T | +---U | +-+-V +-+-W | +---X +-+-Y +---Z Remove node 'G': done +---A +-+-B | +---C +-+-D | | +---E | +-+-F +-+-L --+-M | +---N | +-+-O | | +---P | +-+-Q | | | +---R | | +-+-S +-+-T | +---U | +-+-V +-+-W | +---X +-+-Y +---Z Remove node 'T': done +---A +-+-B | +---C +-+-D | | +---E | +-+-F +-+-L --+-M | +---N | +-+-O | | +---P | +-+-Q | | | +---R | | +-+-S +-+-U | +---V +-+-W | +---X +-+-Y +---Z $