agregando nuevos objetos a localstorage

Question

Estoy tratando de hacer que la parte delantera del carrito de compras con localstorage, ya que hay algunas ventanas modales y tengo que pasar información de artículos de carrito allí. Cada vez que haga clic en agregar a la cesta, debe crear el objeto y enviarlo a la ubicación local. Sé que necesito para poner todo en orden y empuje nuevo objeto a la matriz, después de probar varias soluciones - no puede conseguir que funcione

Eso es lo que tengo (sólo guarda último objeto):

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

se desea sobreescribir los otros objetos cada vez, es necesario utilizar una matriz para contener a todos:

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/

también puede querer consid Utiliza un objeto en lugar de una matriz y usa el nombre del producto como clave. Esto evitará que aparezcan entradas duplicadas en localStorage.

Answer 2

no está directamente relacionado con el almacenamiento local pero hoy en día, es una buena práctica usar React/Angular. aquí es un ejemplo:

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

de here