在 Backbone.js 中使用 localStorage

Posted 2023-03-05

【中文标题】在 Backbone.js 中使用 localStorage

【英文标题】：using localStorage in Backbone.js

【发布时间】：2012-06-22 19:35:17

【问题描述】：

我正在整理一个主干示例，其中创建了模型并进行了编辑和删除。我能够将新模型和编辑保存到本地存储，但是在刷新本地存储以正确显示时遇到问题。它似乎是作为单个对象加载的，因此无论添加多少个模型，它都会给我一个模型。

 var Thing = Backbone.Model.extend(
     defaults: 
         title: 'blank'
     
 );
 var ThingView = Backbone.View.extend(
     template: _.template('<b><button id="remove">X</button> <b><button id="edit">Edit</button> <%= title %></b>'),
     editTemplate: _.template('<input class="name" value="<%= name %>" /><button id="save">Save</button>'),
     events: 
         "click #remove": "deleteItem",
         "click #edit": "editItem",
         "click #save": "saveItem",
     ,
     deleteItem: function () 
         console.log('deleted');
         this.model.destroy();
         this.remove();
     ,
     editItem: function () 
         console.log('editing');
         this.$el.html(this.editTemplate(this.model.toJSON()));
     ,
     saveItem: function () 
         console.log('saved');
         editTitle = $('input.name').val();
         console.log(editTitle);
         this.model.save(
             title: editTitle
         );
         this.$el.html(this.template(this.model.toJSON()));
     ,
     render: function () 
         var attributes = this.model.toJSON();
         this.$el.append(this.template(attributes));
         return this;
     
 );
 var ThingsList = Backbone.Collection.extend(
     model: Thing,
     localStorage: new Store("store-name"),
 );
 var storeVar = localStorage.getItem("store-name");
 console.log(storeVar);
 var thingsList = new ThingsList;
 thingsList.reset(storeVar);
 var ThingsListView = Backbone.View.extend(
     el: $('body'),
     events: 
         'click #add': 'insertItem',
     ,
     initialize: function () 
         this.render();
         this.collection.on("add", this.renderThing, this);
     ,
     insertItem: function (e) 
         newTitle = $('input').val();
         newThing = new Thing(
             title: newTitle
         );
         this.collection.add(newThing);
         newThing.save();
         console.log(this.collection.length);
     ,
     render: function () 
         _.each(this.collection.models, function (items) 
             this.renderThing(items);
         , this);
     ,
     renderThing: function (items) 
         var thingView = new ThingView(
             model: items
         );
         this.$el.append(thingView.render().el);
     
 );
 var thingsListView = new ThingsListView(
     collection: thingsList
 );

【参考方案1】：

您需要将项目添加到您的集合中，然后要读取它，您需要调用 fetch。您的对象中还有几个额外的尾随逗号。

这是您的代码稍作修改的版本，似乎可以正常工作。

var Thing = Backbone.Model.extend(
  defaults:
    title:'blank'
  
 );

 var ThingView = Backbone.View.extend(
    //el: $('body'),
     template: _.template('<b><button id="remove">X</button> <b><button id="edit">Edit</button> <%= title %></b>'),
     editTemplate: _.template('<input class="name" value="<%= name %>" /><button id="save">Save</button>'),


    events: 
    "click #remove": "deleteItem",    
    "click #edit": "editItem",
    "click #save": "saveItem",
    ,

    deleteItem: function()
      console.log('deleted');

            this.model.destroy();
            //remove view from page
            this.remove();
    ,

    editItem: function()
     console.log('editing');
     this.$el.html(this.editTemplate(this.model.toJSON())); 
    ,

    saveItem: function()
     console.log('saved');
     editTitle = $('input.name').val();
     console.log(editTitle);
     this.model.save(title: editTitle);
     this.$el.html(this.template(this.model.toJSON()));
    ,

    render: function()
      var attributes = this.model.toJSON();
      this.$el.append(this.template(attributes));
      return this;
    
 );

 var storeVar = localStorage.getItem("store-name");

 var ThingsList = Backbone.Collection.extend(
   model: Thing,
   localStorage: new Store("store-name")
);

 var things = [
   title: "Macbook Air", price: 799 ,
   title: "Macbook Pro", price: 999 ,
   title: "The new iPad", price: 399 ,
   title: "Magic Mouse", price: 50 ,
   title: "Cinema Display", price: 799 
];

console.log(things);

var thingsList = new ThingsList;

var ThingsListView = Backbone.View.extend(
   el: $('body'),

events: 
      'click #add': 'insertItem'
    ,

initialize: function () 
    this.render();
    this.collection.on("add", this.renderThing, this);
    ,


    insertItem: function(e)
      newTitle = $('input').val();
      newThing = new Thing( title: newTitle );
      this.collection.add(newThing);
      newThing.save();
      //this.model.saveItem;
      console.log(this.collection.length);
    ,


   render: function()
     _.each(this.collection.models, function (items) 
            this.renderThing(items);
        , this);
    ,


  renderThing: function(items) 
    //console.log('added something');
    var thingView = new ThingView( model: items ); 
        items.save();
    this.$el.append(thingView.render().el); 
  

);

var thingsListView = new ThingsListView( collection: thingsList );
thingsList.fetch();
console.log(thingsList.toJSON());
thingsList.reset(things);

编辑：我看到您正在尝试读取存储在“store-name”下的本地存储中的值，backbone-localStorage 的工作方式是它使用商店的名称（在您的案例“商店名称”）来存储其余模型的 id，然后将每个模型保存在商店名称和 id 的组合下，所以假设您有三个模型，最终会在本地有 4 个条目存储，

  localStorage["store-name"]  //id1, id2, id3"
  localStorage["store-name-id1"] //model with id1
  localStorage["store-name-id2"] // model with id2
  localStorage["store-name-id3"] // model with id3

编辑 2

这是一个指向您的代码的jsfiddle 的链接，首先我将注释掉thingsList.fetch(); 行，取消注释该行并注释掉thingsList.add(things); 并再次运行它，它应该会拉取模型来自本地存储（我在那里留下了警报）。

【讨论】：

感谢杰克的回复。不幸的是，这似乎不起作用，因为页面上没有显示 localStorage 中的任何内容。我还意识到我之前发布了该应用程序的早期版本。我在上面进行了编辑并将其替换为较新的版本，该版本保存到 localStorage 但无法正确读取。

我认为您的问题是您尝试不正确地直接从 localStorage 读取数据，我更新了我的答案并提供了更多详细信息。

感谢 Jack，但这仍然不起作用。当我更改为 var storeVar = localStorage.getItem("store-name-id1");控制台.log(storeVar);它返回空值。我的语法不正确吗？

我只是用 id1 来说明我的观点。实际的 id 基于模型的 id，或者如果没有模型，则主干本地存储将生成一个随机 id（我认为它类似于 12 个字符）。无论如何，您可以使用大多数浏览器的调试工具（例如在 Chrome、Safari 或 Opera 上的 Resources/LocalStorage 下检查）查看 localStorage 中存储的内容。

我搞定了。我真正做的只是把 thingsList.fetch(); thingsList.toJSON();在 ThingsListView 的初始化函数中。我可以发布最后一个例子，但我想把答案归功于你。

【参考方案2】：

var Thing = Backbone.Model.extend(
     defaults: 
         title: 'blank'
     
 );
 var ThingView = Backbone.View.extend(
     template: _.template('<b><button id="remove">X</button> <b><button id="edit">Edit</button> <%= title %></b>'),
     editTemplate: _.template('<input class="name" value="<%= name %>" /><button id="save">Save</button>'),
     events: 
         "click #remove": "deleteItem",
         "click #edit": "editItem",
         "click #save": "saveItem",
     ,
     deleteItem: function () 
         console.log('deleted');
         this.model.destroy();
         this.remove();
     ,
     editItem: function () 
         console.log('editing');
         this.$el.html(this.editTemplate(this.model.toJSON()));
     ,
     saveItem: function () 
         console.log('saved');
         editTitle = $('input.name').val();
         console.log(editTitle);
         this.model.save(
             title: editTitle
         );
         this.$el.html(this.template(this.model.toJSON()));
     ,
     render: function () 
         var attributes = this.model.toJSON();
         this.$el.append(this.template(attributes));
         return this;
     
 );
 var ThingsList = Backbone.Collection.extend(
     model: Thing,
     localStorage: new Store("store-name"),
 );
 var storeVar = localStorage["store-name-7ee7d1e3-bbb7-b3e4-1fe8-124f76c2b64d"];
 console.log(storeVar);
 var thingsList = new ThingsList;
 //thingsList.reset(storeVar);
 var ThingsListView = Backbone.View.extend(
     el: $('body'),
     events: 
         'click #add': 'insertItem',
     ,
     initialize: function () 
    thingsList.fetch();
    thingsList.toJSON();
         this.render();
         this.collection.on("add", this.renderThing, this);
     ,
     insertItem: function (e) 
         newTitle = $('input').val();
         newThing = new Thing(
             title: newTitle
         );
         this.collection.add(newThing);
         newThing.save();
         console.log(this.collection.length);
     ,
     render: function () 
         _.each(this.collection.models, function (items) 
             this.renderThing(items);
         , this);
     ,
     renderThing: function (items) 
         var thingView = new ThingView(
             model: items
         );
         this.$el.append(thingView.render().el);
     
 );
 var thingsListView = new ThingsListView(
     collection: thingsList
 );

【讨论】：

可以对你在这里所做的事情做一点评论。你真的只是评论那条线，现在一切都很开心吗？为什么它起作用了？首先出了什么问题？