dodawanie nowych obiektów do localstorage

Question

Próbuję zrobić zakupy na frontowym koszyku z localstorage, ponieważ jest tam kilka modalnych okien i muszę tam przekazać informacje o przedmiotach koszyka. Za każdym razem, gdy klikniesz przycisk Dodaj do koszyka, powinieneś utworzyć obiekt i go do localstorage. Wiem, że trzeba postawić wszystko na tablicy i wcisnąć nowy obiekt do tablicy, po wypróbowaniu wielu rozwiązań - nie może zmusić go do pracy

To, co mam (zapisuje tylko ostatni obiekt):

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

jesteś nadpisanie innych obiektów za każdym razem, musisz użyć tablicę je wszystkie pomieścić:

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/

można też chcą Przy opracowaniu er używając obiektu zamiast tablicy i użyj nazwy produktu jako klucza. Zapobiegnie to duplikowaniu wpisów pojawiających się w localStorage.

Answer 2

Nie jest to bezpośrednio związane z lokalną pamięcią masową, ale w dzisiejszych czasach dobrym pomysłem jest użycie React/Angular. o to przykład:

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

od here