项目：露营伴侣（Camper Mate） - 第六课：保存和取回数据

优质

小牛编辑

127浏览

2023-12-01

如果你认真学过之前的应用制作的话，那么制作一个Data服务对你来说相当简单了。这个跟之前的有一点点不同，因为之前的数据服务都是存储一套数据，但是这个应用中我们要存储很多数据：

营地坐标
营地细节
我的细节

但是理念还是差不多的，看起来可能会稍有不同。我们已经有了自己的表单并且我们的地图页也向咱们的Data服务发送数据了，所以我们要做的是保存它们即可，同时我们需要稍做变更来加载数据回应用。我们先从实现Data服务开始。
> 修改src/providers/data.ts 为如下：

import { Storage } from '@ionic/storage';
import { Injectable } from '@angular/core';
@Injectable()
export class Data {
    constructor(public storage: Storage){
    }
    setMyDetails(data: Object): void {
    let newData = JSON.stringify(data);
    this.storage.set('mydetails', newData);
    }
    setCampDetails(data: Object): void {
        let newData = JSON.stringify(data);
        this.storage.set('campdetails', newData);
    }
    setLocation(data: Object): void {
        let newData = JSON.stringify(data);
        this.storage.set('location', newData);
    }
    getMyDetails(): Promise<any> {
        return this.storage.get('mydetails');
    }
    getCampDetails(): Promise<any> {
        return this.storage.get('campdetails');
    }
    getLocation(): Promise<any> {
        return this.storage.get('location');
    }
}

Storage是Ionic的通用存储服务，他负责使用最佳存储方案的同时给我们提供了统一的API。
当运行在设备上的时候，如果SQLite插件可用（早先安装过了），他会使用本机的SQLite数据库来存储数据。由于SQLite只会在应用运行在真机上才可用，Storage在SQLite不可用的情况下用IndexedDB，WebSQL，或者是浏览器的localStorage。
应当尽量使用SQLite，因为基于浏览器的本地存储不怎么可靠，可以被操作系统随机清理掉。自己的数据存在被随机清理掉明显体验很不好。
在其他应用中，我们基本只有两个函数，一个获取数据一个存储数据。在本应用中，由于我们涉及到三套数据，所以我们创建三个set函数和三个get很熟。set方法接受数据传入然后对传入的数据进行存储（在将他转换成一个JSON字符串之后），get负责将这些数据从数据库中获取回来。get函数将返回一个用于resolve返回数据的promise，而不是直接返回数据，所以我们需要在想要用他的时候设置好处理器。
现在我们设置好了Data服务，我们只需要在重新打开应用的时候加载保存的数据即可。所以，现在我们对Location，MyDetails以及Camp Details页进行变更因为他们也需要载入数据。
我们先从Location页开始。
> 修改 src/pages/location/location.ts 的 ionViewDidLoad 如下：

ionViewDidLoad(): void {
    this.platform.ready().then(() => {
        this.dataService.getLocation().then((location) => {
            let savedLocation: any = false;
            if(location && typeof(location) != "undefined"){
                savedLocation = JSON.parse(location);
            }
            let mapLoaded = this.maps.init(this.mapElement.nativeElement,
            this.pleaseConnect.nativeElement).then(() => {
                if(savedLocation){
                    this.latitude = savedLocation.latitude;
                    this.longitude = savedLocation.longitude;
                    this.maps.changeMarker(this.latitude, this.longitude);
                }
            });
        });
    });
}

我们这里首先是从缓存里面获取用户位置，然后触发地图的加载。如果缓存中有位置信息的话，那么我们的this.latitude和this.longitude就需要用到这些数据，我们将在地图加载完成的时候将它们提供给changeMaker函数。如果没有存储位置的话我们加载地图就够了。
接下来我们处理Camp Details页。
> 修改 src/pages/camp-details/camp-details.ts页为如下：

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Data } from '../../providers/data';
@Component({
    selector: 'page-camp-details',
    templateUrl: 'camp-details.html'
})
export class CampDetailsPage {
    campDetailsForm: FormGroup;
    constructor(public navCtrl: NavController, public platform: Platform, public formBuilder: FormBuilder, public dataService: Data) {
        this.campDetailsForm = formBuilder.group({
            gateAccessCode: [''],
            ammenitiesCode: [''],
            wifiPassword: [''],
            phoneNumber: [''],
            departure: [''],
            notes: ['']
        });
    }
    ionViewDidLoad(){
        this.platform.ready().then(() => {
            this.dataService.getCampDetails().then((details) => {
                let savedDetails: any = false;
                if(details && typeof(details) != "undefined"){
                    savedDetails = JSON.parse(details);
                }
                let formControls: any = this.campDetailsForm.controls;
                if(savedDetails){
                    formControls.gateAccessCode.setValue(savedDetails.gateAccessCode);
                    formControls.ammenitiesCode.setValue(savedDetails.ammenitiesCode);
                    formControls.wifiPassword.setValue(savedDetails.wifiPassword);
                    formControls.phoneNumber.setValue(savedDetails.phoneNumber);
                    formControls.departure.setValue(savedDetails.departure);
                    formControls.notes.setValue(savedDetails.notes);
                }
            });
        });
    }
    saveForm(): void {
        let data = this.campDetailsForm.value;
        this.dataService.setCampDetails(data);
    }
}

可以看到我们加上了从数据服务获取数据的调用然后在其中做了一些处理。记得之前我教你在使用Form Builder创建自己的组的时候怎么样去提供默认值的吧：

gateAccessCode: ['value here']

你也许很期待通过使用保存的值作为初始值来创建你自己的表单。不幸的是，他可能不能这么做。取回数据的过程是异步的，虽然数据取回非常的快但是还是有一个等待时间。而Form Builder组需要立刻创建，否则会报错。所以，我们是立刻创建Form Builder组，然后通过this.campDetailsForm.controls来获取他的音乐。然后，我们就可以通过每个空间的setValue方法来设置存储的值。
接着只需要对My Details页做同样的事情就可以了。
> 修改 src/pages/my-details/my-details.ts 为如下：

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Data } from '../../providers/data';
@Component({
    selector: 'page-my-details',
    templateUrl: 'my-details.html'
})
export class MyDetailsPage {
    myDetailsForm: FormGroup;
    constructor(public nav: NavController, public platform: Platform, public formBuilder: FormBuilder, public dataService: Data) {
        this.myDetailsForm = formBuilder.group({
            carRegistration: [''],
            trailerRegistration: [''],
            trailerDimensions: [''],
            phoneNumber: [''],
            notes: ['']
        });
    }
    ionViewDidLoad() {
        this.platform.ready().then(() => {
            this.dataService.getMyDetails().then((details) => {
                let savedDetails: any = false;
                if(details && typeof(details) != "undefined"){
                    savedDetails = JSON.parse(details);
                }
                let formControls: any = this.myDetailsForm.controls;
                if(savedDetails){
                    formControls.carRegistration.setValue(savedDetails.carRegistration);
                    formControls.trailerRegistration.setValue(savedDetails.trailerRegistration);
                    formControls.trailerDimensions.setValue(savedDetails.trailerDimensions);
                    formControls.phoneNumber.setValue(savedDetails.phoneNumber);
                    formControls.notes.setValue(savedDetails.notes);
                }
            });
        });
    }
    saveForm(): void {
        let data = this.myDetailsForm.value;
        this.dataService.setMyDetails(data);
    }
}

在上面的 Camp Details和 My Details类中，我们都接触了数据服务调用的注释，我们也需要接触Location里面的数据服务调用的注释。
> 修改 src/pages/location/location.ts 的 setLocation() 函数：

setLocation(): void {
    Geolocation.getCurrentPosition().then((position) => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.maps.changeMarker(position.coords.latitude, position.coords.longitude);
        let data = {
            latitude: this.latitude,
            longitude: this.longitude
        };
        this.dataService.setLocation(data);
        let alert = this.alertCtrl.create({
            title: 'Location set!',
            subTitle: 'You can now find your way back to your camp site from anywhere by clicking the button in the top right corner.',
            buttons: [{text: 'Ok'}]
        });
        alert.present();
    });
}

这样就可以了！所有输入到应用里面的数据现在在应用重新加载的时候就可以保持原样了。
我们已经快要来到应用制作的结尾了，显然，我们还要添加一些样式（尽管现在看起来中规中矩），但是下一节课我们要做的是添加一个额外的小功能到应用里。