向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