STIJ6044MobileApplicationProgramming

SessionA142(2015)

DATA PERSISTENCE
LOCALSTORAGE

WHY LOCAL STORAGE?

Data accessed over the internet can never be as
fast as accessing data locally
Data accessed over internet not secure
HTML5 storage is on client

ahmadsuki@gmail.com

STIJ6044MobileApplicationProgramming

SessionA142(2015)

PERSISTENT LOCAL STORAGE

Native client applications use operating system to
store data such as preferences or runtime state
Stored in registry, INI files, XML or other places using
key/value pairs
Web applications cant do this

COOKIES
Invented early in Webs history as a way to store
persistent data (magic cookies)
Small pieces of information about a user stored by
Web server as text files on users computer
Can be temporary or persistent

ahmadsuki@gmail.com

STIJ6044MobileApplicationProgramming

SessionA142(2015)

COOKIES
Included with every HTTP request slows down
application by transmitting same information
repeatedly
Sends unencrypted data over internet with every
HTTP request
Limited to 4KB data
Example: filling out a text form field

COOKIES NOT ENOUGH

ahmadsuki@gmail.com

More storage space

On the client
Beyond page refresh
Not transmitted to server

STIJ6044MobileApplicationProgramming

SessionA142(2015)

HISTORY
IE: DHTML Behaviors
userData behavior allowed 64K per domain
Hierarchical XML-based structure
Adobe Flash (2002)
Flash cookies or Local Shared Objects
Allows Flash objects to store 100K data per
domain temporarily

HISTORY
AMASS (AJAX Massive Storage System)
Brad Neuberg
Flash-to-JavaScript bridge
Limited by Flash design quirks

Flash 8: ExternalInterface (2006)

Easier to access Local Shared Objects

AMASS rewritten
Integrated into Dojo Toolkit: dojox.storage
100KB storage
Prompts user for exponentially increased storage

ahmadsuki@gmail.com

STIJ6044MobileApplicationProgramming

SessionA142(2015)

HISTORY
Google: Gears (2007)
Open source browser plug-in
Provides additional capability in browsers (geolocation API
in IE)
API to embedded SQL database
Unlimited data per domain in SQL database tables

By 2009 dojox.storage could auto-detect and

provide unified interface for Flash, Gears, Adobe
AIR and early prototype of HTML5 storage (in older
version of Firefox)

PREVIOUS STORAGE SOLUTIONS

Either specific to single browser or relied on third
party plug-in
Different interfaces
Different storage limitations
Different user experiences

ahmadsuki@gmail.com

STIJ6044MobileApplicationProgramming

SessionA142(2015)

HTML5 STORAGE

Provides standardized API

Implemented natively
Consistent across browsers
HTML5 storage is a specification named Web
Storage
Previously part of HTML5 specifications
Split into its own specification
Different browsers may call it Local Storage or DOM
Storage

WEB APPLICATION SUPPORT

Supported by latest version of all browsers!

Access through localStorage object on global
window object
Before using, detect whether browser supports it

IE
8+

ahmadsuki@gmail.com

Firefox
3.5+

Safari
4.0+

Chrome
4.0+

Opera IPhone
10.5+ 2.0+

Android
2.0+

STIJ6044MobileApplicationProgramming

SessionA142(2015)

CHECK FOR HTML5 STORAGE

function supports_html5_storage() {
try {
return 'localStorage' in window
&& window['localStorage'] !== null;
} catch (e) {
return false;
}
}

OR USE MODERNIZR

if (Modernizr.localstorage) {
// window.localStorage is available!
} else {
// no native support for HTML5 storage :(
// maybe try dojox.storage or a third-party
solution
}

ahmadsuki@gmail.com

STIJ6044MobileApplicationProgramming

SessionA142(2015)

USING HTML5 STORAGE

localstorage object
.setItem( )
.getItem( )
.removeItem( )
.clear( )

USING HTML5 STORAGE

Tracking changes to the HTML5 storage area
if (window.addEventListener) {
window.addEventListener("storage",
handle_storage, false);
} else {
window.attachEvent("onstorage",
handle_storage);
};

ahmadsuki@gmail.com

STIJ6044MobileApplicationProgramming

SessionA142(2015)

USING HTML5 STORAGE

Tracking changes to the HTML5 storage area
The handle_storage callback function will be called
with a StorageEvent object, except in Internet Explorer
where the event object is stored in window.event.
function handle_storage(e) {
if (!e) { e = window.event; }
}

USING HTML5 STORAGE

StorageEvent Object
PROPERTY

TYPE

key

string

DESCRIPTION
the named key that was added, removed, or modified

oldValue

any

the previous value (now overwritten), or null if a new item was

added

newValue

any

the new value, or null if an item was removed

url*

ahmadsuki@gmail.com

string

the page which called a method that triggered this change

STIJ6044MobileApplicationProgramming

SessionA142(2015)

USING HTML5 STORAGE

Limitations in current browsers:
5 MB of storage from each origin.
Can not ask user for more storage (except for
Opera, sort of)

HTML5 IN ACTION

ahmadsuki@gmail.com

10

STIJ6044MobileApplicationProgramming

SessionA142(2015)

HTML5 IN ACTION
function saveGameState() {
if (!supportsLocalStorage()) { return false; }
localStorage["halma.game.in.progress"] = gGameInProgress;
for (var i = 0; i < kNumPieces; i++) {
localStorage["halma.piece." + i + ".row"] = gPieces[i].row;
localStorage["halma.piece." + i + ".column"] = gPieces[i].column;
}
localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage["halma.selectedpiecehasmoved"] =
gSelectedPieceHasMoved;
localStorage["halma.movecount"] = gMoveCount;
return true;
}

function resumeGame() {
if (!supportsLocalStorage()) { return false; }
gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
if (!gGameInProgress) { return false; }
gPieces = new Array(kNumPieces);
for (var i = 0; i < kNumPieces; i++) {
var row = parseInt(localStorage["halma.piece." + i + ".row"]);
var column = parseInt(localStorage["halma.piece." + i + ".column"]);
gPieces[i] = new Cell(row, column);
}
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"]
== "true";
gMoveCount = parseInt(localStorage["halma.movecount"]);
drawBoard();
return true;
}

ahmadsuki@gmail.com

11

STIJ6044MobileApplicationProgramming

SessionA142(2015)

HTML5 IN ACTION
In the saveGameState() function, we did not worry
about the data type:
localStorage["halma.game.in.progress"] =
gGameInProgress;

HTML5 IN ACTION
But in the resumeGame() function, we need to treat
the value we got from the local storage area as a
string and manually construct the proper Boolean
value ourselves:
gGameInProgress =
(localStorage["halma.game.in.progress"] == "true");

ahmadsuki@gmail.com

12

STIJ6044MobileApplicationProgramming

SessionA142(2015)

HTML5 IN ACTION
Similarly, the number of moves is stored in
gMoveCount as an integer. In the saveGameState()
function, we just stored it:
gMoveCount =
parseInt(localStorage["halma.movecount"]);

HTML5 IN ACTION
But in the resumeGame() function, we need to
coerce the value to an integer, using the parseInt()
function built into JavaScript:
gMoveCount =
parseInt(localStorage["halma.movecount"]);

ahmadsuki@gmail.com

13

STIJ6044MobileApplicationProgramming

SessionA142(2015)

BEYOND KEY-VALUE PAIRS:

COMPETING VISIONS

BEYOND KEY/VALUE PAIRS: COMPETING

VISIONS
2007 Google Gears (based on SQLite) -> Web SQL
Database
openDatabase('documents', '1.0', 'Local
document storage', 5*1024*1024, function (db) {
db.changeVersion('', '1.0', function (t) {
t.executeSql('CREATE TABLE docids (id, name)');
}, error);
});

ahmadsuki@gmail.com

14

STIJ6044MobileApplicationProgramming

SessionA142(2015)

BEYOND KEY/VALUE PAIRS: COMPETING

VISIONS

Web SQL Database

The Web SQL Database specification has been
implemented by four browsers and platforms.
Safari
4.0+

Chrome Opera
4.0+
10.5+

Mobile
Safari
3.0+

Android
2.0+

BEYOND KEY/VALUE PAIRS: COMPETING

VISIONS

SQL-92
Oracle SQL
Microsoft
SQL
MySQL
PostgreSQL
SQLite SQL

ahmadsuki@gmail.com

15

STIJ6044MobileApplicationProgramming

SessionA142(2015)

BEYOND KEY/VALUE PAIRS: COMPETING

VISIONS
Indexed Database API
Formerly known as WebSimpleDB
Now colloquially referred to as indexedDB

BEYOND KEY/VALUE PAIRS: COMPETING

VISIONS
IndexedDB
object store
Shares many concepts with a SQL database:
Records (keys or attributes)
Fields (values)
Datatypes

But no query language!

ahmadsuki@gmail.com

16

STIJ6044MobileApplicationProgramming

SessionA142(2015)

BEYOND KEY/VALUE PAIRS: COMPETING

VISIONS

Firefox 4: An early walk-through of IndexedDB

HTML5 Rocks: IndexedDB example

LOCALSTORAGE
IN ACTION

ahmadsuki@gmail.com

17

STIJ6044MobileApplicationProgramming

SessionA142(2015)

SETTING ITEMS
By using setItem() method,
Store data in key/ value format (or name/ value)
pair as an argument.

Example:
localStorage.setItem(name, Ahmad Suki);
localStorage.setItem(umur, 30);
localStorage.setItem(point, 100);

TRY THIS: SETTING ITEMS

Created with App

Designer with Bootstrap
framework

ahmadsuki@gmail.com

18

STIJ6044MobileApplicationProgramming

SessionA142(2015)

TRY THIS: SETTING ITEMS

OTHER WAY TO SET ITEMS

Due to the way that the storage API has
been defined, the set/get/remove methods
all are getters, setters and deleters. You can
use localStorage as follows:
localStorage.name = Ahmad Suki;
localStorage.umur = 30;

ahmadsuki@gmail.com

19

STIJ6044MobileApplicationProgramming

SessionA142(2015)

GETTING ITEMS
By using getItem() method,
Store data in key/ value format (or name/ value)
pair as an argument.

Example:
localStorage.getItem(name);
@
localStorage.name;

TRY THIS

ahmadsuki@gmail.com

20

STIJ6044MobileApplicationProgramming

SessionA142(2015)

TRY THIS: STORE MORE DATA

Develop a simple application to store just
request the following data then store
persistently in the mobile device
1.
2.
3.
4.

Amount (withdrawal)
Note RM50 (how many)
Note RM20
Note RM10

TRY THIS: STORE DATA FROM

APPLICATION
Modify your ATM withdrawal emulation
application to store the following data
1.
2.
3.
4.

ahmadsuki@gmail.com

Withdrawal Amount
Note RM100
Note RM20
Note RM5

21

STIJ6044MobileApplicationProgramming

SessionA142(2015)

TRY THIS: STORE MULTIPLE TYPES OF DATA

Develop a simple application to store
1. Name (String type)
2. Gender (Male or Female String type)
3. Marital status (Married or not Boolean
[Yes/No])
4. Weight (Float type)
5. Age (Integer type)
6. Address (String type)

TRY THIS: USERNAME & PASSWORD

Develop an application to store:
1. Username
2. Password

Extend the application to retrieve:

1. Username
2. Password

ahmadsuki@gmail.com

22

STIJ6044MobileApplicationProgramming

SessionA142(2015)

TRY THIS: VERIFY PASSWORD APP - I

Start

**This app only examines either

the username & password have
been set for the first time use.

Retrieve the
stored values

Test the
value

Not yet set

Has been set

Start the real
app process
(until the end
of app)

Display the
username &
password form
**probably through
Intern
Store the
items in the
device

**dont have to implement or Just display a

form that the password has been set.

TRY THIS: VERIFY PASSWORD APP - I

ahmadsuki@gmail.com

23

STIJ6044MobileApplicationProgramming

SessionA142(2015)

TRY THIS:

VERIFY PASSWORD APP - II

**Modify the previous app to test either the user enters
a correct username-password or not.
Test the
value

Not yet set **the changes are

started after this part

from the previous
flowchart

Has been set

Get username
& password
Compare users
username&pass
Wd with
sharePrefs

**Request
again
**not match

**match
Start the real
app

TRY THIS:

VERIFY PASSWORD APP - III

**Modify your previous app exercise, i.e. BMI, ATM, etc prior
to the app your should ask the username/passwd.
Test the
value

Not yet set

Has been set

**consider to apply
Intent

Get username
& password
Compare users
username&pass
Wd with
sharePrefs

**match
Start your
BMI/ATM/etc app

ahmadsuki@gmail.com

**Request
again
**not match
**Youre advised to plan
your screens movement
**sketch yr screen & draft its
flow.

24

STIJ6044MobileApplicationProgramming

SessionA142(2015)

TRY THIS:
CHILDREN MATH APP - I
The questions are randomly
generated.

TRY THIS:
CHILDREN MATH APP - I
Start
Generate
random numbers
User answer
the questions

User press
button

Button Next

Button Check
Implement
evaluate user
answer

ahmadsuki@gmail.com

Implement
Generate
random
numbers

User press button

Next

25