Yeni nesneler eklemek için

Question

Bazı modal pencereler olduğu için alışveriş sepetinin ön ucunu localstorage ile yapmaya çalışıyorum ve alışveriş sepeti bilgilerini buraya aktarmam gerekiyor. Her sepete eklemeyi tıklattığınızda, nesneyi oluşturmalı ve bu nesneyi localstorage yapmalısınız. Ben dizide her şeyi koymak ve birden çözümleri denedikten sonra, diziye yeni bir nesne itmek gerektiğini biliyorum - (sadece son nesneyi kaydeder) ben ne var O

işe alınamıyor:

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/

Ayrıca düşünenler, isteyebilirsiniz: her zaman diğer nesnelerin üzerine yazıyorsanız, hepsini tutmak için bir dizi kullanmak gerekir bir dizi yerine bir nesne kullanarak ve ürün adını anahtar olarak kullanın. Bu, localStorage'da görünen yinelenen girişleri engeller.

Answer 2

doğrudan yerel depolama ile ilgili değil, ancak günümüzde, React/Angular kullanmak için iyi bir uygulamadır.

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