LocalStorage in Contact Manager (knockoutjs)

Question

Это приложение является диспетчером контактов. И я хочу, когда пользователь заполнит форму и нажмите сохранить контакты, которые, как представляется, будут храниться в локальном хранилище, чтобы я мог удалить некоторые из них и т. Д. Добавление и удаление работают, но они не сохраняются.

Вот приложение: http://jsfiddle.net/vpbj32Lh/

Проблема в этой линии:

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 файле Это willbe добавление и удаление, но не сохранение и загрузка

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); - это не имеет никакого смысла. Вы инициализируете наблюдаемый массив с помощью объекта функции. Вы даже не вызываете функцию, вы передаете функцию. В любом случае, здесь нет смысла.

<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.

Edit:

This is a working JSFiddle с спасительной части. Я не знаю, как JSFiddle обрабатывает localStorage, но, как я сказал вам в комментариях к моему коду в исходном ответе, ваша функция load неверна и должна будет прочитать строку из localStorage, проанализировать ее на JSON (с помощью JSON.parse(string)) и постройте соответствующие объекты, используя вашу конструкторскую функцию (Contact). Это довольно легко, и вы можете сделать это самостоятельно.

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