Learn to Code: Ionic Local Storage

Hampir setiap aplikasi yang kita gunakan memerlukan penyimpanan data. Data apa yang kita masukan kedalam aplikasi tentunya kita berharap data tersebut tidak dengan mudahnya hilang ketika kita keluar dari aplikasi tersebut. Proses menyimpan data dalam device/smartphone kita disebut dengan penyimpanan pada localstorage (penyimpanan local).

Local Storage ini sangat bermanfaat sekali dalam sebuah aplikasi, dimana inputan yang telah disimpan oleh user, akan tersimpan baik dalam memori handphone, sehingga ketika user kembali menjalankan aplikasinya, data/input yang telah dimasukan tidak hilang.

Untuk mempermudah bagaimana kita melakukan proses penyimpanan dalam local, mari ikuti tahapan berikut. Seperti biasa kita lakukan persiapan untuk membuat sebuah aplikasi.

ionic start localStorage blank
cd localStorage
ionic serve

Setelah persiapan awal selesai, kita lakukan proses pemanggilan library pihak ketiga yang menyediakan fitur penyimpanan di local. Jika anda memilih untuk memanggil library ini secara offline, maka akan lebih baik anda mendownload file ngStorage.js dan simpan pada library anda. Cara yang bisa dilakukan adalah.

npm install ngstorage

Kemudian, pastikan dimana letak penyimpanan file ngStorage.js nya. Untuk kasus aplikasi saya saya simpan pada folder ngstorage pada directory www/lib/ngstorage/ngStorage.js.
Atau cara lain untuk mempermudah, anda bisa langsung men clone file saya di github, saya menyediakannya secara gratis. Silahkan klik disini.

Setelah proses diatas selesai, kita bisa melanjutkan pada proses persiapan tampilan depan. silahkan masukkan code berikut ini pada file index.html

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 <title></title>

 <link href="lib/ionic/css/ionic.css" rel="stylesheet">
 <link href="css/style.css" rel="stylesheet">

 <!-- ionic/angularjs js -->
 <script src="lib/ionic/js/ionic.bundle.js"></script>
 <script src="lib/ngstorage/ngStorage.js"></script>

 <!-- cordova script (this will be a 404 during development) -->
 <script src="cordova.js"></script>

 <!-- your app's js -->
 <script src="js/app.js"></script>
</head>

<body ng-app="starter">

 <ion-pane>
  <ion-header-bar class="bar-positive">
   <h1 class="title">Local Storage App</h1>
  </ion-header-bar>
  <ion-content ng-controller="localStorageCtrl" class="padding">
   <div class="list">
    <label class="item item-input item-stacked-label">
            <span class="input-label">First Name</span>
            <input type="text" placeholder="Prawito" ng-model="a.first">
          </label>
    <label class="item item-input item-stacked-label">
            <span class="input-label">Last Name</span>
            <input type="text" placeholder="Hudoro" ng-model="a.last">
          </label>
    <label class="item item-input item-stacked-label">
            <span class="input-label">Email</span>
            <input type="email" placeholder="prawito@zcodegroup.com" ng-model="a.email">
          </label>
   </div>
   <div class="spacer" style="height: 5px;"></div>
   <button class="button button-positive button-block" ng-click="save()">Save</button>
   <div class="spacer" style="height: 5px;"></div>
   <div class="row">
    <div class="col">
     <center><button class="button icon-left ion-trash-b button-assertive" ng-click="remove()">Remove All</button></center>
    </div>
    <div class="col">
     <center><button class="button icon-left ion-clipboard button-energized" ng-click="show()">Show Data</button></center>
    </div>
   </div>
   <div>
    <hr>
    <center><strong>Your Data</strong></center>
    <hr>
   </div>
   <div class="card" ng-repeat="item in showData">
    <div class="item item-text-wrap">
     <div class="row">
      <div class="col-80">
       <strong><h4>{{item.first}} {{item.last}}</h4></strong>
       <h4><small>{{item.email}}</small></h4>
      </div>
      <div class="col">
       <a class="button button-icon icon ion-trash-a" style="color: red" ng-click="del($index)"></a>
      </div>
     </div>
    </div>
   </div>
  </ion-content>
 </ion-pane>
</body>

</html>

Setelah tampilan depan selesai, kita tinggal melakukan finishing pada bagian app.js. Silahkan masukkan code dibawah ini pada file app.js.

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngStorage'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller('localStorageCtrl', function($scope, $localStorage) {
    $scope.data = [];
    $scope.save = function() {
        $scope.data.push($scope.a);
        $scope.a = {}
        $localStorage.inputUser = $scope.data;
    }

    $scope.show = function() {
        $scope.showData = $localStorage.inputUser;
    }

    $scope.remove = function() {
        $localStorage.$reset();
        $scope.show();
    }

    $scope.del = function(id) {
        $localStorage.inputUser.splice(id, 1);
    }

})

Setelah selesai semua, anda bisa langsung menjalankan aplikasi baik pada smartphone anda maupun pada browser anda. selamat mencoba dan Semoga bermanfaat.

5 comments

Balas

Aditya

February 27, 2016 at 8:46 PM

Hello Mas , mau tanya itu datanya disimpen dimana yah (android)

Unknown

March 1, 2016 at 6:18 AM

Hallo mas , mau tanya kalo mekanisme penyimpanan ke server web bisa ga ya? misal saya buat app pendaftaran , tapi nyimpen datanya ke database mysql di server web.