向本地存储添加新对象答案

【问题标题】：adding new objects to localstorage向本地存储添加新对象
【发布时间】：2012-08-23 04:03:36
【问题描述】：

我正在尝试使用 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));

【问题讨论】：

ItemObject 不是 itemObject？你的变量名是错误的。 Javascript 区分大小写。
在您保存到localStorage 的对象中，i 是小写字母，而您创建的对象是大写字母 I。
抱歉我刚才打错了，现在修正
您提到您知道需要将对象添加到array，但您的代码 sn-p 没有显示，您是否收到错误或您在询问如何做那个？
这个链接可能会有所帮助stackoverflow.com/questions/23554456/…

标签： javascript html local-storage

【解决方案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/

您可能还想考虑使用对象而不是数组，并使用产品名称作为键。这将防止在 localStorage 中出现重复条目。

【讨论】：

将它用于一个项目，就像一个魅力！正是我需要的，至于重复的条目，我找到了一种可以解决此问题的方法：您可以使用 .some() 函数检查当前数组是否包含此元素，如果为真，则使用 forEach()并检查当前对象是否等于您要添加的对象，在我的情况下，将此订单的数量增加新数量

【解决方案2】：

它与本地存储没有直接关系，但如今，使用 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')
);

来自here

【讨论】：