文章翻譯：周倍同
發(fā)表時(shí)間：2015 年 7 月 23 日
原文作者：TROY MILES
文章分類：移動(dòng)應(yīng)用開發(fā)

關(guān)于本文

如今越來(lái)越多的移動(dòng) App 采用 HTML5 的方式來(lái)進(jìn)行開發(fā)，同時(shí)還有一部分的 Web App 是通過(guò)瀏覽器來(lái)訪問(wèn)的，這就使得用戶在離線的狀態(tài)下無(wú)法使用 App 。本文要介紹的就是通過(guò)使用 ionic 將數(shù)據(jù)保存到本地中，實(shí)現(xiàn)離線存儲(chǔ)，這樣即使在離線的情況下用戶也能正常使用 App。

文章內(nèi)容

用戶希望移動(dòng) App 中某些功能能夠簡(jiǎn)單的運(yùn)行。如果事情不像他們期望的那樣的話，用戶會(huì)刪除你的 App，甚至是給你的產(chǎn)品一個(gè)差評(píng)。用戶希望 App 的設(shè)置功能(Settings)能夠簡(jiǎn)單好用。無(wú)論何時(shí)用戶在設(shè)置界面做出更改，他們希望這些更改能生效并且正確的保存下去。這樣當(dāng)下一次他們啟動(dòng) App 的時(shí)候，就不需要再重新設(shè)置一遍了。

讓一個(gè)使用 ionic 代碼庫(kù)開發(fā)的 App 一直正確的執(zhí)行任務(wù)不是一件很難的事情，但是這篇文章能幫你避免開發(fā)過(guò)程中的一些小麻煩。比如說(shuō)，我們可以使用 ionic 的側(cè)邊菜單啟動(dòng)模板再給它添加一個(gè)設(shè)置界面（本文中使用的版本是 beta 14 of Ionic）。設(shè)置界面沒(méi)有什么特別的地方，但是實(shí)際上 App 的設(shè)置能在應(yīng)用的任何地方保存。設(shè)置界面只是提供了一個(gè)展示全部設(shè)置的地方。下面我們就來(lái)看看如何保存被用戶改變的值。

我們?cè)O(shè)置策略的第一部分就是將我們所有的個(gè)人設(shè)置都保存在 Settings object 中。這是我的一個(gè)個(gè)人喜好。我的 App 通常都會(huì)將 Settings object 中的所有屬性順序化和序列化。任何我想保存一些東西的時(shí)候，我就會(huì)把它加入到 Settings object 中，系統(tǒng)就會(huì)完成剩下的部分。

接下來(lái)，我們使用一個(gè) Angular Value object 來(lái)保存設(shè)置。value（值）是 angular 的提供者，就像工廠、服務(wù)、提供者和常量一樣。和常量不同的是，values 是可以改變的。所以 value 能讓我們很好的保存我們的 settings object ，同時(shí)我們輸入的值充當(dāng)默認(rèn)值。

angular.module('starter')
   .value("Settings", {
       searchRadius: {value: "5"},
       acceptsPushNotification: true,
       hasUserSeenMessage: false,
       pagesPerLoad: 20
   });

設(shè)置策略的基礎(chǔ)是 HTML5 的本地存儲(chǔ)。本地存儲(chǔ)能讓網(wǎng)頁(yè)應(yīng)用以基于鍵值對(duì)的方式通過(guò)字符串來(lái)存儲(chǔ)數(shù)據(jù)。如果你還對(duì)我們?nèi)绾未鎯?chǔ)各種類型的包括字符串在內(nèi)的數(shù)據(jù)有疑問(wèn)的話，不用再多想了。我們選擇將所有數(shù)據(jù)保存在單個(gè)對(duì)象中的理由是我們能通過(guò)使用 JSON 實(shí)現(xiàn)單個(gè)對(duì)象與字符串之間的相互轉(zhuǎn)換。

文件 localstorage-service.js 中只有兩種方法在 services API 中。第一個(gè)是 serializeSettings，另外一個(gè)是 deserializeSettings。兩者分別實(shí)現(xiàn)的功能和名字的描述一樣。在 Local Storage 和 checkLocalStorage 中同樣有一個(gè)內(nèi)部唯一的方法。這個(gè)方法只用于診斷，因?yàn)樗挥脕?lái)將設(shè)備有本地存儲(chǔ)的位置寫入控制臺(tái)。

Local Storage 做的最后一件事就是在啟動(dòng)的過(guò)程中調(diào)用 deserializeSettings，并賦予 settings object 上一次存儲(chǔ)的值。如何沒(méi)有任何保存的值，那么就使用存儲(chǔ)在 value 中的 Settings object。另外一個(gè)需要解釋的點(diǎn)就是為什么我們?cè)谑褂?angular extend 時(shí)要復(fù)制屬性而不是簡(jiǎn)單的將整個(gè)對(duì)象拷貝過(guò)來(lái)。如果我們?cè)?jīng)修改過(guò)整個(gè) angular value object，它就會(huì)變回到默認(rèn)值，做出的更改也就失效了。我們可以選擇寫一個(gè)函數(shù)來(lái)復(fù)制這些屬性，但是 angular extend 拷貝屬性的方式正是我們需要的。

function deserializeSettings() {
   var newSettings, rawSettings = localStorage[settings];
   if(rawSettings) {
        newSettings = JSON.parse(rawSettings);
       if (newSettings) {
           // use extend since it copies one property at a time
           angular.extend(Settings, newSettings);
           console.log("Settings restore");
       }
   }
}

在 Settings controller 中，我們將 Settings object 中的 values 與界面中的 widget 綁定在一起。將 $scope object 和 Settings object 的屬性取成相同名字，會(huì)讓更新屬性值變得更容易，如果我們使用 JavaScript 括號(hào)表示法來(lái)訪問(wèn)對(duì)象的話，我們就能同時(shí)訪問(wèn) $scope object 和 Settings object。當(dāng)任何一個(gè) widget 的 value 發(fā)生改變的時(shí)候，onChange 方法就會(huì)被調(diào)用，然后我們就可以用到之前提到的方法同時(shí)訪問(wèn)兩個(gè)對(duì)象。

if (!Settings.hasUserSeenMessage) {
   Settings.hasUserSeenMessage = true;
   LocalStorageService.serializeSettings();
   $ionicPopup.alert({
       title: 'Hi There',
       template: '<div class="text-center">You are a first time user.</div>'
   });
}

// set the initial values for the widgets
$scope.searchRadius = Settings.searchRadius;
$scope.acceptPush = Settings.acceptPush;

// when a widget is changed, come here and update the setting object too
$scope.onChange = function (type, value) {
   $scope[type] = value;
   Settings[type] = value;
   LocalStorageService.serializeSettings();
};

我們也演示了如何系統(tǒng)的保存變量。在代碼中，hasUserSeenMessage 屬性會(huì)被檢查。如果用戶沒(méi)有看見(jiàn)我們發(fā)送的一次性消息，我們就會(huì)將 value 設(shè)為 true，將 value 保存在本地存儲(chǔ)中，然后再次顯示消息。任何時(shí)候你想要保存設(shè)置，只要調(diào)用 LocalStorageService.serializeSettings 就行了。

更多IT技術(shù)干貨: wiki.jikexueyuan.com
加入極客星球翻譯團(tuán)隊(duì): http://wiki.jikexueyuan.com/project/wiki-editors-guidelines/translators.html

版權(quán)聲明：
本譯文僅用于學(xué)習(xí)和交流目的。非商業(yè)轉(zhuǎn)載請(qǐng)注明譯者、出處，并保留文章在極客學(xué)院的完整鏈接
商業(yè)合作請(qǐng)聯(lián)系 wiki@jikexueyuan.com
原文地址：[https://www.packtpub.com/books/content/persisting-data-local-storage-ionic ](https://www.packtpub.com/books/content/persisting-data-local-storage-ionic )