Javascript 联系人管理器中的本地存储（knockoutjs）

此应用程序是联系人管理器。我希望当用户填写表单时，单击“保存联系人”，这些联系人似乎存储在本地存储中，以便我可以删除其中的一些联系人等。添加和删除操作正常，但无法存储

以下是应用程序：

这方面的问题是：

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);
}

---

如果删除这些行并在html文件中“data bind=”click:save“，它将添加和删除，而不是保存和加载

我发现您的代码中有许多地方需要更改。 这是一个固定版本：

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>

---

“它没有存储”是什么意思？@PWKad刷新页面后，它没有保存或加载联系人LocalStorage使用起来非常简单。您是否使用开发工具对其进行了调试，并确保调用了每个函数？我还将检查您是否试图存储过多数据。本地存储的数据大小限制不同每个浏览器都有一个“t”。@jlafay我知道数据大小限制。是的，我试图解决这个问题，但正如您所看到的，我无法解决t@ovesyan19，我没有看到任何试图解决它的迹象。当你调试保存和加载函数时发生了什么？谢谢你的帮助。非常感谢。谢谢你的解释，我很感激！现在我陷入了加载的乐趣中你能告诉我答案吗？这样我才能最终理解如何使用localStorage，因为我经常遇到问题@rafaeleyng@ovesyan19请参阅Edit 2so何处调用“load”函数？@Rafaeleyng我想这取决于您。您想何时从localStorage加载联系人？在应用程序启动时？

  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);
    }
  }