web-dev-qa-db-ja.com

localstorageに新しいオブジェクトを追加する

いくつかのモーダルウィンドウがあり、カートアイテム情報をそこに渡す必要があるため、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));
javascripthtmllocal-storage
20
alexndm

あなたは毎回他のオブジェクトを上書きしており、それらをすべて保持するために配列を使う必要があります：

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/

また、配列ではなくオブジェクトの使用を検討し、製品名をキーとして使用することもできます。これにより、localStorageに重複したエントリが表示されるのを防ぎます。

38
jbabey

ローカルストレージとは直接関係ありませんが、最近では、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')
);

から ここ

0
ChaosPredictor