web-dev-qa-db-fra.com

ajout de nouveaux objets à localstorage

J'essaie de créer un frontal de panier avec localstorage, car il y a des fenêtres modales et je dois y transmettre des informations sur les articles du panier. Chaque fois que vous cliquez sur ajouter au panier, il doit créer un objet et le stocker localement. Je sais que je dois tout mettre dans le tableau et pousser un nouvel objet dans le tableau, après avoir essayé plusieurs solutions - je ne peux pas le faire fonctionner

C'est ce que j'ai (enregistre uniquement le dernier objet):

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));
javascripthtmllocal-storage
20
alexndm

Vous écrasez les autres objets à chaque fois, vous devez utiliser un tableau pour les contenir tous:

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/

Vous pouvez également envisager d'utiliser un objet au lieu d'un tableau et d'utiliser le nom du produit comme clé. Cela empêchera les entrées en double de s'afficher dans localStorage.

38
jbabey

ce n'est pas directement lié au stockage local, mais de nos jours, c'est une bonne pratique d'utiliser React/Angular. voici un exemple:

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 ici

0
ChaosPredictor