假設(shè)你創(chuàng)建了一個(gè)Ionic 2應(yīng)用晨逝,在其中用戶可以創(chuàng)建購(gòu)物清單蛾默。用戶下載了你的應(yīng)用,花了5分鐘添加他們的清單然后關(guān)掉應(yīng)用...然后數(shù)據(jù)都付諸東流了捉貌。
通常制作移動(dòng)應(yīng)用的時(shí)候你需要去存儲(chǔ)數(shù)據(jù)好讓用戶稍后獲取支鸡。大部分時(shí)候冬念,我們都是通過(guò)將數(shù)據(jù)存儲(chǔ)在遠(yuǎn)程服務(wù)器上(想想Facebook、Twitter啦就是這么干的)并獲取實(shí)現(xiàn)牧挣,當(dāng)然這個(gè)有網(wǎng)絡(luò)連接需求(下一節(jié)課會(huì)講)急前。在一些案例中,我們想要將數(shù)據(jù)存儲(chǔ)到設(shè)備本地瀑构。
將數(shù)據(jù)存放在本地是有原因的:
- 應(yīng)用是完全自容的裆针,與其他用戶并無(wú)交互,所以所有數(shù)據(jù)都可以存放本地寺晌。
- 我們需要為一些功能存儲(chǔ)本地?cái)?shù)據(jù)据块,例如記錄登錄用戶
- 我們可以通過(guò)本地存儲(chǔ)首選設(shè)置而無(wú)需遠(yuǎn)程服務(wù)器調(diào)用
- 我們可以通過(guò)本地存儲(chǔ)其他數(shù)據(jù)無(wú)需遠(yuǎn)程服務(wù)器調(diào)用
- 我們可以同步在線和離線數(shù)據(jù)因此客戶甚至可以在離線的時(shí)候持續(xù)使用應(yīng)用(Evernote就是一個(gè)典型的例子)
HTML5應(yīng)用都是運(yùn)行在瀏覽器中的,所以我們沒(méi)有本地應(yīng)用那種訪問(wèn)本地存儲(chǔ)的選擇折剃。但是我們還有普通瀏覽器網(wǎng)頁(yè)可用的存儲(chǔ)選擇另假,Local Storage,Web SQL(已廢棄)和IndexedDB怕犁。這些選擇雖然可能不大理想(理由我會(huì)簡(jiǎn)單說(shuō)明)边篮,但是我們還是可以通過(guò)Cordova來(lái)彌補(bǔ)瀏覽器數(shù)據(jù)存儲(chǔ)的不足,通過(guò)他訪問(wèn)本地?cái)?shù)據(jù)存儲(chǔ)奏甫。
在本地存儲(chǔ)數(shù)據(jù)的選擇有很多戈轿,但是我們只會(huì)講一些Ionic 2應(yīng)用的主流做法,也就是Local Storage和SQLite阵子。
Local Storage
這是誰(shuí)最基本的存儲(chǔ)選擇思杯,允許你在用戶瀏覽器中存儲(chǔ)5MB的數(shù)據(jù)。記住挠进,Ionic 2應(yīng)用技術(shù)上是運(yùn)行在內(nèi)置的瀏覽器中色乾。
Local Storage封裝得有點(diǎn)不好,通沉焱唬可以認(rèn)為是不可靠的暖璧。我認(rèn)為瀏覽器本地存儲(chǔ)是一個(gè)可行選項(xiàng),合理的穩(wěn)定和可靠君旦,但是澎办,數(shù)據(jù)卻可以被擦除,這代表著很多應(yīng)用不會(huì)使用他金砍。即使他在99%的時(shí)候好用局蚀,但是在存儲(chǔ)大部分類型的數(shù)據(jù)的時(shí)候還是不夠完美。
總的來(lái)講恕稠,你只有在數(shù)據(jù)丟失無(wú)關(guān)緊要的時(shí)候可以考慮使用它琅绅,在存儲(chǔ)敏感數(shù)據(jù)的時(shí)候不要用他,因?yàn)樗苋菀自L問(wèn)到谱俭。一個(gè)很合適的本地存儲(chǔ)應(yīng)用場(chǎng)景是存儲(chǔ)一些類型臨時(shí)會(huì)話token奉件。他讓你知道是否登錄宵蛀,但是即使數(shù)據(jù)丟失的話也不是什么大事情,因?yàn)橛脩糁枰俅屋斎胗脩裘兔艽a再次認(rèn)證即可县貌。
如果你只是使用本地存儲(chǔ)來(lái)緩存服務(wù)器數(shù)據(jù)的話术陶,數(shù)據(jù)也不是什么大問(wèn)題,因?yàn)槟銜?huì)重新從服務(wù)器獲取煤痕。
Local Storage是一個(gè)簡(jiǎn)單的鍵-值系統(tǒng)梧宫,可以通過(guò)全局的localStorage對(duì)象來(lái)訪問(wèn):
localStorage.setItem('someSetting', 'off');
let someSetting = localStorage.getItem('someSetting');
這是一個(gè)設(shè)置和獲取本地存儲(chǔ)數(shù)據(jù)的本地方法(網(wǎng)頁(yè)瀏覽器的本地,不是iOS或者Android本地)摆碉。
SQLite
SQLite基本上就是一個(gè)可以運(yùn)行在一個(gè)移動(dòng)設(shè)備上的內(nèi)置SQL數(shù)據(jù)庫(kù)塘匣。和普通的SQL數(shù)據(jù)庫(kù)不一樣,他不需要運(yùn)行在服務(wù)器上巷帝,不需要任何配置忌卤。iOS和Android應(yīng)用(其他的也可以)都可以用SQLite,但是SQLite數(shù)據(jù)庫(kù)只能本地(譯者:本地應(yīng)用的本地楞泼,非local驰徊,是native)訪問(wèn),所以他默認(rèn)是不能被HTML5移動(dòng)應(yīng)用訪問(wèn)到的堕阔。
我們可以通過(guò)Cordova輕松獲取這個(gè)功能的訪問(wèn)棍厂。在項(xiàng)目中運(yùn)行一下命令就可以安裝:
ionic plugin add https://github.com/litehelpers/Cordova-sqlite-storage
使用SQLite的好處有以下幾點(diǎn):
- 提供了持久的數(shù)據(jù)存儲(chǔ)
- 存儲(chǔ)數(shù)據(jù)無(wú)尺寸限制
- 提供了SQL語(yǔ)法,所以是一個(gè)強(qiáng)大的數(shù)據(jù)管理工具
雖然超陆,SQL和SQLite支持的命令有一些區(qū)別牺弹,但是基本都是一樣的。一下是一些SQLite數(shù)據(jù)查詢的范例:
db.transaction(function(tx) {
tx.executeSql('DROP TABLE IF EXISTS test_table');
tx.executeSql('CREATE TABLE IF NOT EXISTS test_table (id integer primary key, data text, data_num integer)');
tx.executeSql("INSERT INTO test_table (data, data_num) VALUES (?,?)", ["test", 100], function(tx, res) {
console.log("insertId: " + res.insertId + " -- probably 1");
console.log("rowsAffected: " + res.rowsAffected + " -- should be 1");
}, function(e) {
console.log("ERROR: " + e.message);
});
});
上面的例子看起來(lái)相當(dāng)怪異时呀,但是如果你熟悉SQL的話张漂,至少其中一些你看著眼熟。這是標(biāo)準(zhǔn)的通過(guò)Cordova使用SQLite的方法退唠,但是Ionic提供了他自己的使用SQLite的服務(wù)鹃锈。
Ionic Storage
幸運(yùn)的是荤胁,對(duì)于大部分存儲(chǔ)需要我們不用擔(dān)心實(shí)現(xiàn)細(xì)節(jié)瞧预。Ionic提供了他自己的存儲(chǔ)服務(wù),可以自動(dòng)使用最佳的存儲(chǔ)機(jī)制(不管它是老的本地存儲(chǔ)仅政,Web SQL垢油, IndexedDB或者SQLite)。無(wú)論背后使用的是什么存儲(chǔ)機(jī)制圆丹,他始終給我們提供統(tǒng)一的API滩愁。
想要使用的話,先知app.module.ts文件中導(dǎo)入和添加:
import { Storage } from '@ionic/storage';
然后添加到提供者數(shù)組:
providers: [Storage]
然后你可以注入到任何你要用到的類中辫封。以下面的提供者為例:
import { Storage } from '@ionic/storage';
import { Injectable } from '@angular/core';
@Injectable()
export class Data {
constructor(public storage: Storage){
}
getData(): any {
return this.storage.get('checklists');
}
save(data): void {
let newData = JSON.stringify(data);
this.storage.set('checklists', newData);
}
}
我們只要簡(jiǎn)單地調(diào)用this.storage.set就可以將數(shù)據(jù)存儲(chǔ)到指定的鍵(這里是checklists)上去硝枉,后面我們利用this.storage.get方法傳入這個(gè)鍵來(lái)獲取這些數(shù)據(jù)廉丽。
如果你的數(shù)據(jù)存儲(chǔ)要求更復(fù)雜,這可能不是你的完美之選妻味,但是對(duì)于很多場(chǎng)景來(lái)講正压,這個(gè)提供了一個(gè)很簡(jiǎn)單的存儲(chǔ)數(shù)據(jù)的方法。