Question

此应用程序是联系人管理器。我希望当用户填写表单并单击保存似乎存储在本地存储中的联系人，这样我就可以删除其中的一些等。添加和删除工作正常，但它没有存储。

这方面的问题：

self.load = function(){
    self.contacts = localStorage.getItem("stored_contacts");
}

self.save = function(){

    localStorage.setItem("stored_contacts", self.contacts); 
    self.contacts=localStorage.getItem("stored_contacts");

    console.log(self.contacts.length);
}

如果删除此行并且＆＃34; data-bind =＆＃34;请点击：save＆＃34;在html文件中。它将添加和删除但不保存和加载

Answer 1

我在代码中发现了许多要改变的事情。这是一个固定版本：

<强> JS

(function ContactManager(){
  // ...

  self.contacts = ko.observableArray();

  self.addItem = function(){
    self.contacts.push(new Contact(self.conName(), self.phone(), self.email(), self.address()));
  }
  // ...
  self.load = function(){
    // haven't tested, but probably won't work. I think you'd have to convert your JSON to observables
    self.contacts = localStorage.getItem("stored_contacts"); 
  }

  self.save = function(){
    self.addItem(); // calling it from here, not from your HTML form submit
    // you have to convert to JSON to save in localStorage
    localStorage.setItem("stored_contacts", ko.toJSON(self.contacts()));
  }

  ko.applyBindings(self.templateName);
})();

<强> HTML

<form class="addContact" autocomplete="on"> 
    <!-- ... -->
</form>

有几点意见：

self.contacts = ko.observableArray(self.save); - 这没有任何意义。您正在使用函数对象初始化observableArray。您甚至没有调用该函数，您正在传递该函数。无论哪种方式，这里没有意义。

<form data-bind="submit: addItem" >和<button data-bind="click: save" type="submit"> - 你绑定一个事件到你点击按钮，另一个事件到表单的提交，当你点击...按钮。这可能适用于某些设置，但无法正常工作，因此我从addItem调用了save。

localStorage.setItem("stored_contacts", self.contacts); - 您正在尝试存储一组非常复杂的对象（联系人），每个对象都包含localStorage中的其他几个复杂对象（可观察对象）。但是，localStorage，只存储字符串。所以你必须将你的对象转换为JSON。 ko.toJSON是要走的路。更多信息来自docs。

修改

带保存部分的
This is a working JSFiddle。我不知道JSFiddle如何处理localStorage，但正如我在原始答案中对我的代码的评论中告诉你的那样，你的load函数是错误的，必须从localStorage读取字符串，解析它到JSON（带JSON.parse(string)）并使用构造函数（Contact）构造适当的对象。这很简单，你可以自己做。

编辑2：

加载函数应该是这样的（尚未测试）：

self.load = function(){ var contactsJSON = localStorage.getItem("stored_contacts"); // a string var loadedContacts = JSON.parse(contactsJSON); // an array self.contacts = ko.observableArray(); // an observableArray for (var i in loadedContacts) { var loadedContact = loadedContacts[i]; // an object var newContact = new Contact(/* pass the parameters from loadedContact*/); // a Contact object self.contacts.push(newContact); } }

联系人管理器中的LocalStorage（knockoutjs）

1 个答案: