[Ionic 2從入門(mén)到精通] 2.10 保存數(shù)據(jù)

假設(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 StorageWeb 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 StorageSQLite阵子。

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ù)的方法。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末责球,一起剝皮案震驚了整個(gè)濱河市焦履,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌雏逾,老刑警劉巖嘉裤,帶你破解...
    沈念sama閱讀 206,602評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異栖博,居然都是意外死亡屑宠,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)仇让,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)侨把,“玉大人,你說(shuō)我怎么就攤上這事妹孙∏锉” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,878評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵蠢正,是天一觀的道長(zhǎng)骇笔。 經(jīng)常有香客問(wèn)我,道長(zhǎng)嚣崭,這世上最難降的妖魔是什么笨触? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,306評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮雹舀,結(jié)果婚禮上芦劣,老公的妹妹穿的比我還像新娘。我一直安慰自己说榆,他們只是感情好虚吟,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評(píng)論 5 373
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著签财,像睡著了一般串慰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上唱蒸,一...
    開(kāi)封第一講書(shū)人閱讀 49,071評(píng)論 1 285
  • 那天邦鲫,我揣著相機(jī)與錄音,去河邊找鬼神汹。 笑死庆捺,一個(gè)胖子當(dāng)著我的面吹牛古今,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播滔以,決...
    沈念sama閱讀 38,382評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼沧卢,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了醉者?” 一聲冷哼從身側(cè)響起但狭,我...
    開(kāi)封第一講書(shū)人閱讀 37,006評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎撬即,沒(méi)想到半個(gè)月后立磁,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,512評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡剥槐,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評(píng)論 2 325
  • 正文 我和宋清朗相戀三年唱歧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片粒竖。...
    茶點(diǎn)故事閱讀 38,094評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡颅崩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蕊苗,到底是詐尸還是另有隱情沿后,我是刑警寧澤,帶...
    沈念sama閱讀 33,732評(píng)論 4 323
  • 正文 年R本政府宣布朽砰,位于F島的核電站尖滚,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏瞧柔。R本人自食惡果不足惜漆弄,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望造锅。 院中可真熱鬧撼唾,春花似錦、人聲如沸哥蔚。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,286評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)肺素。三九已至恨锚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間倍靡,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,512評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工课舍, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留塌西,地道東北人他挎。 一個(gè)月前我還...
    沈念sama閱讀 45,536評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像捡需,于是被迫代替她去往敵國(guó)和親办桨。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容