[英]adding new objects to localstorage
我正在嘗試使用本地存儲制作購物車前端,因為有一些模式窗口,我需要在那里傳遞購物車項目信息。 每次單擊添加到購物車時,它都會創建對象並將其添加到本地存儲。 我知道在嘗試多種解決方案后,我需要將所有內容放入數組並將新對象推送到數組中-無法使其正常工作
這就是我所擁有的(僅保存最后一個對象):
var itemContainer = $(el).parents('div.item-container');
var itemObject = {
'product-name': itemContainer.find('h2.product-name a').text(),
'product-image': itemContainer.find('div.product-image img').attr('src'),
'product-price': itemContainer.find('span.product-price').text()
};
localStorage.setItem('itemStored', JSON.stringify(itemObject));
您每次都覆蓋其他對象,您需要使用一個數組來保存它們:
var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];
var newItem = {
'product-name': itemContainer.find('h2.product-name a').text(),
'product-image': itemContainer.find('div.product-image img').attr('src'),
'product-price': itemContainer.find('span.product-price').text()
};
oldItems.push(newItem);
localStorage.setItem('itemsArray', JSON.stringify(oldItems));
您可能還需要考慮使用對象而不是數組,並使用產品名稱作為鍵。 這將防止在 localStorage 中出現重復條目。
它與本地存儲沒有直接關系,但現在,使用 React/Angular 是一種很好的做法。 這是一個例子:
var TodoItem = React.createClass({
done: function() {
this.props.done(this.props.todo);
},
render: function() {
return <li onClick={this.done}>{this.props.todo}</li>
}
});
var TodoList = React.createClass({
getInitialState: function() {
return {
todos: this.props.todos
};
},
add: function() {
var todos = this.props.todos;
todos.push(React.findDOMNode(this.refs.myInput).value);
React.findDOMNode(this.refs.myInput).value = "";
localStorage.setItem('todos', JSON.stringify(todos));
this.setState({ todos: todos });
},
done: function(todo) {
var todos = this.props.todos;
todos.splice(todos.indexOf(todo), 1);
localStorage.setItem('todos', JSON.stringify(todos));
this.setState({ todos: todos });
},
render: function() {
return (
<div>
<h1>Todos: {this.props.todos.length}</h1>
<ul>
{
this.state.todos.map(function(todo) {
return <TodoItem todo={todo} done={this.done} />
}.bind(this))
}
</ul>
<input type="text" ref="myInput" />
<button onClick={this.add}>Add</button>
</div>
);
}
});
var todos = JSON.parse(localStorage.getItem('todos')) || [];
React.render(
<TodoList todos={todos} />,
document.getElementById('container')
);
從這里
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.