项目：快捷列表 - 第六课：保存和加载数据

优质

小牛编辑

129浏览

2023-12-01

你知道什么是最烦恼的吗？如果你创建了一大个待完成的checklist，稍后回来的时候再用的时候，发现没有了。嗯，这就是应用当前的状态，所以我们将要给用户提供一个保存用户数据的途径。
我们已经为他做了一些架构准备，我们订阅了我们的Observable在每次数据变更的时候都调用了save函数，我们只需要现在来实现这个函数就可以了。
> 修改 src/pages/home/home.ts 里面的 save 方法：

save(): void {
    Keyboard.close();
    this.dataService.save(this.checklists);
}

如果你不健忘的话，早些时候我们已经生成和导入了一个数据服务，所以我们这里只需要调用他并传入checklists数据。当然，我们目前还没有实现这个数据服务，所以他现在不会对数据做任何事情，我们现在就来弥补他。注意，我们也调用了Keyboard的close方法，由于会在任何数据项变更的时候调用save方法，我们可以用他来在用户添加或者编辑完数据之后确保键盘关闭。

保存数据

我们现在要给data.ts码代码了，让他可以将传入的任何数据保存到存储里面去。实际上这个服务的代码相当的简单，我们来看看：
> 修改 src/providers/data.ts ：

import { Storage } from '@ionic/storage';
import { Injectable } from '@angular/core';
@Injectable()
export class Data {
    constructor(public storage: Storage){
    }
    getData(): Promise<any> {
        return this.storage.get('checklists');
    }
    save(data): void {
        let saveData = [];
        //Remove observables
        data.forEach((checklist) => {
            saveData.push({
                title: checklist.title,
                items: checklist.items
            });
        });
        let newData = JSON.stringify(saveData);
        this.storage.set('checklists', newData);
    }
}

这里有个我们之前没见过的导入：

import { Storage } from '@ionic/storage';

Storage是Ionic的统一存储服务，他负责使用最好的方式来存储数据的同时提供了一个统一的API给供我们使用。
当在设备上运行的时候，如果SQLite插件是可用状态的话（我们之前安装过了），他将会使用本地（native）SQLite数据库来存储数据。由于SQLite数据库只在设备上可用，在SQLite不可用的情况下，Storage也会用IndexedDB，WebSQL或者标准浏览器的localStorage。
尽可能使用SQLite，因为基于浏览器的本地存储不大可靠可以被操作系统默默的清理掉。如果你的数据可以被随机清理掉的话显然很不理想。
我们来看看getData函数：

getData(): Promise<any> {
    return this.storage.get('checklists');
}

这个函数允许我们获取最新的存储数据，他会以Promise的方式返回数据。我们将此函数的返回的Promise的返回类型设置为类型，这是一个更复杂的类型。记住，这不是唯一可用类型，所以，如果你觉得很迷惑的话，你可以什么都不加，像这样：

getData(){
    return this.storage.get('checklists');
}

注意，在这里我们没有给promise完成的时候添加处理器，我们只是返回get方法的结果（一个解析当前存储数据的promise）。记住，这个行为不是瞬间完成的，这样我们可以在调用这个函数的任何地方添加处理器，也更像应用的工作流。（希望这个能够更简单明了）
然后，我们来到了saveData函数，这个函数用于将数据保存到存储里：

save(data): void {
    let saveData = [];
    //Remove observables
    data.forEach((checklist) => {
        saveData.push({
            title: checklist.title,
            items: checklist.items
        });
    });
    let newData = JSON.stringify(saveData);
    this.storage.set('checklists', newData);
}

之前提到我们，我们将数据存为一个简单的JSON编码字符串，所以我们调用了JSON.stringify函数然后使用set方法将他保存到存储对象里去。在做这些之前，我们把数据的observable移除掉只加入title和items，因为他们跟JSON不搭调（他会引起circular对象错误），我们后面会重新创建它们。
这就是保存数据的全部内容，也没那么复杂。我们接下来处理加载数据到应用中。

加载数据

任何时候当用户打开应用，我们都需要从存储中加载checklists数据，所以最适合做这个操作的地方是home页的ionViewDidLoad，这个函数会在页面加载完成的时候触发。我们将对构造器进行小小的变更。
> 在 src/pages/home/home.ts 中修改constructor和ionViewDidLoad：

constructor(public nav: NavController, public dataService: Data, public
alertCtrl: AlertController, public platform: Platform) {
}
ionViewDidLoad(){
this.platform.ready().then(() => {
    this.dataService.getData().then((checklists) => {
        let savedChecklists: any = false;
        if(typeof(checklists) != "undefined"){
            savedChecklists = JSON.parse(checklists);
        }
        if(savedChecklists){
            savedChecklists.forEach((savedChecklist) => {
                let loadChecklist = new ChecklistModel(savedChecklist.title, savedChecklist.items);
                this.checklists.push(loadChecklist);
                loadChecklist.checklist.subscribe(update => {
                    this.save();
                });
            });
        }
    });
});
}

我们调用了数据服务里面刚定义的getData函数。之前也提过，getData函数返回一个promise而不是直接返回数据，这样我们可以在加载完成之后处理响应。如果getData直接返回数据的话，当我们想要访问他的时候可能他都没有返回。
所以我们一直等待取回数据，然后将checklists传入到我们的处理器。首先我们解码JSON字符串到数组到这样我们就可以用来，然后我们循环数组里的每个数据项，基于这些数据创建一个新的Checklist Data。循环数据和创建新的模型而不是直接将this.checklists设置为savedChecklists的原因是在保存checklists将他转换成JSON字符串的时候他就丧失了使用数据模型里的助理函数的能力。所以，我们得利用取得的标题和数据项来为所有的checklists创建新的对象。
最后，我们重新给Observable设置监听器，这样当数据改变的时候就会被处罚。重点关注我们所作的这些都是在platform.ready()调用里面进行的，如果在设备准备好之前这么做的话将会发生问题。

总结

这就是本节课的所有内容，数据现在在进行任何变更后可以被保存到SQLite数据里面去，应用重新打开的时候，所有数据将会重新加载回来。试一下添加一些checklist或者修改checklist的状态，然后重新加载应用看看对他进行的变更是否还在。