向localstorage添加新對象

Question

我試圖使購物車前端與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)); 

Answer 1

你每一次覆蓋其他對象，你需要使用一個數組來保存所有：

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)); 

http://jsfiddle.net/JLBaA/1/

您可能還需要consid呃使用對象而不是數組，並使用產品名稱作爲關鍵字。這將防止在localStorage中出現重複條目​​。

Answer 2

它與本地存儲沒有直接關係，但現在，使用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') 
); 

從here