Last few weeks I’ve been working on a series covering Ionic Framework and OnsenUI. All of that came to halt on this topic. Both frameworks can use same methods of data storing, so there’s no point in writing separate articles.
When working with hybrid mobile applications being able to persist local data is crucial. A some time ago it was done with cookies, now we can use a Web Storage. Unlike cookies, these technologies can store a large amount of data, and it’s available only when you request it. This data holds name/value pairs, and websites (or applications) can only access their private data.
Do not use these techniques to store important data (like passwords, API keys, etc.)
Table of Contents
[spoiler title=” Click here if you want to see other OnsenUI tutorials.”]
- Series 1 – Installation
- Series 2 – Anathomy of a Page
- Series 3 – UI Patterns
- Series 4 – Mixing UI Patterns
- Series 5 – Navigation Pattern
- Series 6 – Navigation Pattern
- Series 7 – Tab Bar Pattern
- Series 8 – Page Navigation
- Series 9 – Passing Data Between Pages
- Series 10 – Form Handling And Validation
- Series 11 – Infinite Scroll
- Series 12 – Pull To Refresh
- Series 13 – Touch Gestures
[/spoiler]
[spoiler title=” Click here if you want to see other Ionic tutorials, or articles about Ionic themes, templates, plugins …”]
Tutorials
- Series 1 | Installation
- Series 2 | Anathomy of a Page
- Series 3 | UI Patterns
- Series 4 | Mixing UI Patterns
- Series 5 | Master Detail Pattern
- Series 6 | Side Menu Pattern
- Series 7 | Tab Pattern
- Series 8 | Page Navigation
- Series 9 | Passing Data Between Pages
- Series 10 | Form Handling And Validation
- Series 11 | Infinite Scroll
- Series 12 | Pull To Refresh
- Series 13 | Touch Gestures
- Series 14 | Grid System
- Series 15 | Storing data in Ionic Framework
- Series 16 | Using Google Maps With Ionic Framework
- Series 17 | Ionic Framework | Get Page Height & Width
- Series 18 | Understanding Ionic View LifeCycle
- Series 19 | Using Views Events To Create JavaScript Pure Ionic Splash Screen
- Series 20 | Handling Android Back Button Like a Pro
- Series 21 | How to Properly Debug Your Ionic Application
- Series 22 | Creating a Transparent NavBar In Ionic Framework
- Series 23 | What’s the difference between Cordova and Ionic ready state
- Series 24 | Why is The .dot Notation Important in Ionic Framework?
- Series 25 | Programmatically Show Ion List Options Buttons in Ionic Framework
- Series 26 | How to Create Elegant Slider Carousel in Ionic Framework
- Series 27 | Speed Up Your Ionic Application Using These Techniques
Other Resources (themes, templates, plugins, Cordova plugins, starter apps)
- Best Looking Ionic Framework Themes
- Must-have plugins for Ionic Framework
- A Comprehensive List Of Ionic Starter Apps
- Useful Cordova Plugins For Your Ionic Application & Examples
- 15 Great Inspirational UI Theme Designs For Ionic Framework
Cordova Plugin Tutorials
- Changing & Locking Screen Orientation In Ionic Application
- Using Smartphone Camera With Ionic Framework
- Whitelist External Resources and API Calls | Ionic Framework
- Using Cordova Geoloacation API with Google Maps in Ionic Framework
- How to Launch External Application With Ionic Framework
- Using Cordova File Transfer Plugin With Ionic Framework
- How to send an SMS with Ionic Framework and ngCorodva
- How to use Local Notifications with Ionic Framework
- How to Search, Create, and Delete Contacts Using Ionic Framework
- How to Open a File using its default application in Ionic Framework
- How to Show Different Native Modal Windows In Ionic Framework
- Accessing Image Galery using Ionic and ngCordova
- Detecting Device Motion With Ionic Framework and ngCordova
- Handling Native View Animations With Ionic Framework
- Retrieving IP Adress Using Cordova Without External Services
- Using Google AdMob in Your Android Ionic Application
[/spoiler]
Intro
I will demonstrate several solutions, if possible I will also include working examples.
The first solution depends on direct LocalStorage access:
window.localStorage.setItem("key",value);
In this case, we set the key named key holding some value. You may also heard of a slightly different syntax:
window.localStorage['key'] = value;
This approach also works, but I would like to advise you against it, some browsers don’t support this way of access.
The second solution still uses LocalStorage approach, but this time it’s wrapped into AngularJS module:
angular.module('app', [ 'ngStorage' ]).controller('Ctrl', function( $scope, $localStorage, $sessionStorage ){});
Both solutions also have a significant downside; you can store maximum 5MB of data.
Solution 1 – Vanilla LocalStorage Access
Embedded working example
Walkthrough
There’s nothing special about this example, only part of code worth mentioning is this one:
$scope.signIn = function() { if(typeof(Storage) != "undefined") { window.localStorage.setItem("username", $scope.authorization.username); window.localStorage.setItem("password", $scope.authorization.password); alert("Data is stored, reload this page to retrieve it back!"); } else { alert("LocalStorage not supported!"); } }; $scope.remove = function() { window.localStorage.removeItem("username"); window.localStorage.removeItem("password"); };
While not necessary, it is a good practice to check if a browser supports Local Storage before you start doing anything with it:
if(typeof(Storage) != "undefined") {
When you restart this example, Controller will prefill both input fields so make sure you actually write something before you click Authorize button. You can also remove stored data using removeItem function:
window.localStorage.removeItem("username"); window.localStorage.removeItem("password");
HTML:
<html ng-app="starter"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" /> <title>Ionic Framework Example</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <script src="script.js"></script> </head> <body> <ion-nav-bar class="bar-positive"></ion-nav-bar> <ion-nav-view></ion-nav-view> <script id="home.html" type="text/ng-template"> <ion-view view-title="Ionic Framework LocalStorage Example"> <ion-content class="padding"> <h2 style="text-align:center;">1. Enter Username and Password data</h2> <h2 style="text-align:center;">2. Press Authorize button</h2> <h2 style="text-align:center;">3. Reload this page</h2><br/> <div class="list"> <label class="item item-input"> <span class="input-label">Username</span> <input type="text" ng-model="authorization.username"> </label> <label class="item item-input"> <span class="input-label">Password</span> <input type="password" ng-model="authorization.password"> </label> </div> <button class="button button-full button-positive" ng-click="signIn()"> Authorize </button> </ion-content> </ion-view> </script> </body> </html>
JavaScript:
var nameApp = angular.module('starter', ['ionic']); nameApp.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '/', templateUrl: 'home.html', controller: 'HomeCtrl' }); $urlRouterProvider.otherwise("/"); }); nameApp.controller('HomeCtrl', function($scope) { $scope.authorization = { username: '', password : '' }; if(typeof(Storage) != "undefined") { $scope.authorization.username = window.localStorage.getItem("username"); $scope.authorization.password = window.localStorage.getItem("password"); } else { alert("LocalStorage not supported!"); } $scope.signIn = function() { if(typeof(Storage) != "undefined") { window.localStorage.setItem("username", $scope.authorization.username); window.localStorage.setItem("password", $scope.authorization.password); alert("Data is stored, reload this page to retrieve it back!"); } else { alert("LocalStorage not supported!"); } }; });
Solution 2 – ngStorage
Embedded working example
want to know connection method between ionic and php