我們現(xiàn)在可以拍照类溢，可以展示了，還可以刪除了露懒。問(wèn)題是當(dāng)應(yīng)用關(guān)閉的時(shí)候闯冷，this.photos里面的數(shù)據(jù)會(huì)跟著丟失。顯然懈词，當(dāng)用戶(hù)下次使用應(yīng)用的時(shí)候發(fā)現(xiàn)他們的自拍不見(jiàn)了蛇耀，他們肯定是不高興的，所以這節(jié)課就是來(lái)學(xué)習(xí)如何制作一個(gè)數(shù)據(jù)存儲(chǔ)服務(wù)來(lái)持久存儲(chǔ)數(shù)據(jù)和加載數(shù)據(jù)到應(yīng)用中坎弯。
這個(gè)流程的大部分我們都設(shè)置好纺涤，我們已經(jīng)生成了一個(gè)‘Data’提供者，然后也已經(jīng)在home.ts里面導(dǎo)入了抠忘，我們甚至還給他創(chuàng)建了一個(gè)save函數(shù)撩炊，這個(gè)函數(shù)是保存數(shù)據(jù)用的。所以崎脉，實(shí)際上我們要做的是這些：
- 實(shí)現(xiàn)save函數(shù)以調(diào)用數(shù)據(jù)服務(wù)
- 修改空空如也的Data拧咳，提供save和load功能
- 在應(yīng)用打開(kāi)的時(shí)候加載照片數(shù)據(jù)到應(yīng)用中
實(shí)現(xiàn)數(shù)據(jù)服務(wù)
現(xiàn)在要給data.ts添加代碼了讓他可以保存數(shù)據(jù)到存儲(chǔ)中。這個(gè)服務(wù)的代碼看起來(lái)簡(jiǎn)單得難以置信囚灼，所以我們先瞄一下然后再討論骆膝。
> 修改 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('photos');
}
save(data): void {
let newData = JSON.stringify(data);
this.storage.set('photos', newData);
}
}
我們先看一下頂部的導(dǎo)入語(yǔ)句：
import { Storage } from '@ionic/storage';
Storage是Ionic的統(tǒng)一存儲(chǔ)服務(wù)，他在提供統(tǒng)一的API的同時(shí)會(huì)選擇最佳的存儲(chǔ)方式灶体。
在設(shè)備上運(yùn)行的時(shí)候阅签，如果可以用SQLite插件的時(shí)候（我們?cè)缦劝惭b過(guò)），那么他就會(huì)使用本機(jī)SQLite數(shù)據(jù)庫(kù)來(lái)存放數(shù)據(jù)赃春。鑒于SQLite數(shù)據(jù)庫(kù)只在設(shè)備本機(jī)上才能運(yùn)行愉择，在SQLite不可用的情況下，Storage還會(huì)用IndexedDB， WEBSQL或者標(biāo)準(zhǔn)的瀏覽器localStorage锥涕。
但是最好是用SQLite衷戈，因?yàn)榛跒g覽器的本地存儲(chǔ)不是完全可靠的，存在著被操作系統(tǒng)擦除的風(fēng)險(xiǎn)层坠。數(shù)據(jù)可能會(huì)隨時(shí)被刪掉顯示是很難接受的殖妇。
我們看看getData函數(shù)：
getData(): Promise<any> {
return this.storage.get('photos');
}
這個(gè)函數(shù)提供給我們獲取存儲(chǔ)的最新的數(shù)據(jù)。storage的get方法將返回一個(gè)promise破花，但是注意谦趣，我們沒(méi)有在promise完成的時(shí)候做任何操作。這樣我們可以在任意調(diào)用這個(gè)函數(shù)的地方處理就可以了座每，這樣的話(huà)應(yīng)用的工作流就更明了前鹅。（希望描述簡(jiǎn)單明了）
接著，我們有一個(gè)save函數(shù)峭梳，用來(lái)操作實(shí)際的數(shù)據(jù)存儲(chǔ)：
save(data): void {
let newData = JSON.stringify(data);
this.storage.set('photos', newData);
}
我們將所有數(shù)據(jù)都存儲(chǔ)成一個(gè)單獨(dú)的JSON字符串舰绘，所以我們先調(diào)用了JSON.stringify函數(shù)然后通過(guò)storage的set方法存儲(chǔ)。
這就是存儲(chǔ)數(shù)據(jù)的全部葱椭，真心不復(fù)雜啊親∥媸伲現(xiàn)在我們來(lái)處理從存儲(chǔ)中加載數(shù)據(jù)回應(yīng)用。也就是我們接下來(lái)要處理的是loadPhotos函數(shù)孵运。
> 修改 src/pages/home/home.ts 的 loadPhotos 函數(shù)：
loadPhotos(): void {
this.dataService.getData().then((photos) => {
let savedPhotos: any = false;
if(typeof(photos) != "undefined"){
savedPhotos = JSON.parse(photos);
}
if(savedPhotos){
savedPhotos.forEach(savedPhoto => {
this.photos.push(new PhotoModel(savedPhoto.image, new
Date(savedPhoto.date)));
});
}
if(this.photos.length > 0){
let today = new Date();
if(this.photos[0].date.setHours(0,0,0,0) === today.setHours(0,0,0,0)){
this.photoTaken = true;
}
}
this.loaded = true;
});
}
我們首先調(diào)用了數(shù)據(jù)服務(wù)里的getData()函數(shù)秦陋。這個(gè)函數(shù)會(huì)以JSON字符串的方式返回所有照片數(shù)據(jù)，所以我們第一個(gè)要做到事情是對(duì)這個(gè)字符串進(jìn)行JSON解碼將他解析成一個(gè)可以直接使用的對(duì)象治笨，如果沒(méi)有照片數(shù)據(jù)返回的話(huà)應(yīng)該是一個(gè)空數(shù)組驳概。
如果存儲(chǔ)中加載照片數(shù)據(jù)成功的話(huà)，我們就可以通過(guò)這些數(shù)據(jù)旷赖，給他們重建照片數(shù)據(jù)模型抡句。接著，我們又要判斷用戶(hù)今天是否還能拍照杠愧。我們檢查第一位的照片的日期是否就是今天，如果是的話(huà)photoTaken就設(shè)為true逞壁。
一旦這些都執(zhí)行完成流济，我們將this.loaded設(shè)為true來(lái)標(biāo)記所有照片都加載完成。現(xiàn)在腌闯，我們只剩下save函數(shù)調(diào)用數(shù)據(jù)服務(wù)的函數(shù)绳瘟。
我們移步來(lái)完成save函數(shù)的定義。
> 修改home.ts的save函數(shù)為如下：
save(): void {
this.dataService.save(this.photos);
}
現(xiàn)在姿骏，當(dāng)你調(diào)用save函數(shù)的時(shí)候糖声，他都會(huì)把當(dāng)前的this.photos傳入到數(shù)據(jù)服務(wù)進(jìn)行存儲(chǔ)。
總結(jié)
這節(jié)課相當(dāng)?shù)暮?jiǎn)單，所以希望你能夠從上一節(jié)課程中緩過(guò)來(lái)蘸泻。保存和加載數(shù)據(jù)聽(tīng)起來(lái)很復(fù)雜琉苇，但是，你看悦施，保存簡(jiǎn)單的數(shù)據(jù)還是蠻簡(jiǎn)單的并扇。
下一節(jié)課，我們將做些稍微好玩的事情抡诞，我們將要完成Slideshow頁(yè)穷蛹，這樣我們可以看到用戶(hù)的所有照片的滑動(dòng)展示頁(yè)，同時(shí)完成的還有我們自定義的“Days Ago”管道昼汗。
