Ch05 Client Side Data Storage

Chapter 5
CLIENT-SIDE DATA STORAGE

Mr. SAR Vathnak
July , 2018
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY
OBJECTIVES
 To store data into web storage (local storage or session storage)
 To store data into Web SQL database
CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS| BY SAR VATHNAK >> 1

[1, 6]
WEB STORAGE
 What is the web storage?
 Web storage allows you to use JavaScript to set name/value pairs that you can
retrieve across multiple page reloads.
 With HTML web storage, web apps can store data locally within the user's browser.
 There are 2 kinds of web storage:

 an object which stores the data with no expiration date.
 The data will not be deleted when the browser is closed, and will be available the
next day, week, or year.
 Session storage: is an object which stores the data for only one session.
 The data is deleted when the user closes the specific browser tab.
 So what is the different between local storage and session storage?
CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 2

[1]
LOCAL STORAGE vs. SESSION STORAGE
Local Storage Session Storage
 data is store in localStorage object  data is stored in a window object
 data is available to all windows or tabs  data is discard when the window or tab
that are loaded from the same origin is closed
(i.e., same domain, protocol, and port)
 data is saved even after the  other windows/tabs are not aware of
window/tab is closed the values

USING LOCAL STORAGE

[1]
 To set a value into a local storage:

 localStorage.setItem ( key, value );
 Ex: localStorage.setItem ( ‘age’, 25 ); meaning that it will set the value 25 to
the key age of local storage, [or]
 localStorage.key = value ;
 Ex: localStorage.age = 25 ;
 To access a local storage’s value with a specific key:

 localStorage.getItem ( key );
 Ex: var myAge = localStorage.getItem ( ‘age’ ); meaning that it will get the
local storage’s value with a key = age into a variable named myAge, [or]
 localStorage.key;
 Ex: var myAge = localStorage.age;

USING LOCAL STORAGE

[1]
 To delete a specific key/value pair from a local storage:

 localStorage.removeItem ( key );
 Ex: localStorage.removeItem ( ‘age’ ); meaning that it will remove a from local
storage that has key = age, [or]
 delete localStorage.key;
 Ex: delete localStorage.age;
 To delete all key/value pair from a local storage: localStorage.clear();

 So let’s practice on using local storage to save data in our kilo app…

SAVING USER SETTINGS TO LOCAL STORAGE [1]
 In your custom .js file, put the following code:

 To save the settings (for the kilo app):
1. overrides the submit action of the Settings form with a
custom function called saveSettings()
2. grabs the values from the 3 form inputs using jQuery’s val()
function and save each in a local storage variable
CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6a

 In your custom .js file, put the following code:

 To save the settings (for the kilo app):
1. overrides the submit action of the Settings form with a
custom function called saveSettings()
2. grabs the values from the 3 form inputs using jQuery’s val()
function and save each in a local storage variable
CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6b

 Note on saving user settings:

 uses jQuery’s goback() function to dismiss the panel and return to
the previous page.
 returns false to prevent the default action (i.e., tend not to
reload the current page)of the submit event that triggers the
function saveSettings()

LOADING USER SETTINGS FROM LOCAL STORAGE

[1]
 In your custom .js file,

 creates one more function called loadSettings() for loading
user settings which have been saved in local storage
 triggers the above function when the app launches


[1]
 In your custom .js file,

 creates one more function called loadSettings() for loading
user settings which have been saved in local storage
 triggers the above function when the app launches


[1]
 However, what will happen if the user navigates to the

Settings panel,
changes some values, and taps the Cancel button without
submitting
the form?
 These unsaved values will be sitting in the Settings panel the next
time the user visit it again.
 To rectify this kind of bad loading situation,

 just binding the loadSettings() function to the
pageAnimationStart event of the Settings panel:


[1]
 [ More task ] We also need

to check the local storage’s
values before loading user
settings into Settings panel.

SAVING THE SELECTED DATE TO SESSION STORAGE

[1]
 There are 2 main objectives in this task:

1. checks the database for any record
entered for that date and display them
in the list
2. allows the user to add and delete entries
from the database
Why need to save the clicked
 Task 1: Checks which item (date) the date into session storage?
user
clicked, and
 save the clicked date into session storage
 Task 2: Updates the incoming date

panel
 the date is get from session storage


[1]
 There are 2 main objectives in this task:

1. checks the database for any record
entered for that date and display them
in the list Assume that today is 7/10/2018
2. allows the user to add and delete entries
from the database
Why need to save the clicked
 Task 1: Checks which item (date) the date into session storage?
user
clicked, and
 save the clicked date into session storage
 Task 2: Updates the incoming date

panel


[1]
 Task 1: Checks which item (date) the user clicked, and

save the clicked date into session storage


[1]
 Task 2: Updates the incoming date panel


WEB SQL DATABASES

[1, 9]
 The web SQL database spec:

 gives a simple but powerful JavaScript database API to store persistent data in a local
SQLite database.
 allows developers to use standard SQL statements (CRUD)
 SQLite is a popular choice as embedded database software for local/client

storage in
application software such as web browsers. It is not a client-server database
engine.
 For more information please visit:
 Client-Side Storage, https://www.html5rocks.com/en/tutorials/offline/storage/

CREATING [1]
DATABASE
 To set up a
database
for storing the
submitted data,
put the below
codes
at the bottom
part
of ready()
function.
CREATING [1]
DATABASE
db is a global variable
which is used for
holding
a reference to the
database connection
once we’ve established
it
CREATING [1]
DATABASE
A string that will refer

to the database file on
disk
CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 15c
CREATING [1]
DATABASE
Your database version

for further updating
app
CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 15d
CREATING [1]
DATABASE
A string of your
database name that
will be presented in
the
interface to the user,
Ex: At Google Chrome’s
Developer Tools
CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 15e
CREATING [1]
DATABASE
The maximum number

of
kilobytes to which you
will
allow your database
to grow.
CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 15f
CREATING [1]
DATABASE
calls openDatabase()
and stores the
connection in the db
variable.
If the database doesn’t
already exist, it will be
created.
CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 15g
CREATING [1]
DATABASE
calls the
transaction()
method of the db
object’to allow
transaction to the
database for executing
any database queries.
CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 15h
INSERTING ROWS [1]
 Inserting one new row (of record) into a database involves these below steps:
1. overrides submit event of the #createEntry form:
at the beginning of ready() function

INSERTING ROWS [1]
2. creates a function called createEntry() to handle the transaction of inserting
a new entry (or row) to the database:
function createEntry(){
...
...
}

INSERTING ROWS [1]
 Inserting one new row (of record) into a

database
involves these below steps:
3. gets data from the corresponding input of
#createEntry form

INSERTING ROWS [1]
 Inserting one new row (of record) into a database involves these below
steps:
4. executes SQL for inserting
The SQL statement that willone
be new entry with
executed the above
for inserting onedata
new from step
row to the3database.
The question marks are data placeholders.
Each element in this array is corresponding

by position with the data placeholder
question marks in the SQL statement.

INSERTING ROWS [1]
5. handles action after successfully inserting (i.e., success in executing SQL)
This anonymous function will execute

if the SQL query is successful
At the moment, this refreshEntries()

only updates the title of the Date panel.
Later, it will make entries you create
appear in the list there.

INSERTING ROWS [1]
6. handles errors incase of inserting failure (i.e., failure in executing SQL)
The error handler is passed two parameters:
the name of the function that will
the transaction object and the error object.
execute if the SQL query fails

Full Codes of Inserting New Row
INSERTING ROWS [1]
6. handles errors incase of inserting failure (i.e., failure in executing SQL)
The error handler is passed two parameters:
the name of the function that will
the transaction object and the error object.
execute if the SQL query fails

[1]
RETRIEVING RESULT SETS

 Retrieving existing rows (of records) from a database involves these below
steps:
1. query the database for entries on the selected date
2. updates an existing function called refreshEntries()
Full codes is on the

next slide… with detail
explanations

FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY
uses jQuery’s gt() function

to select and remove any
li elements with an index
greater than 0.
Purpose
need to remove any other
<li>s before appending
rows from the database
over again and again.

PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 23a
The SQL statement for

retrieving entries with the
selected date
Purpose
Select every rows from the
database table entries
where a field date is equal
to currentDate and order
those result sets by the field
food.

PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 23b
This anonymous function

will be called in the event
of a successful query.
It accepts two parameters:
transaction and result.
Purpose
The object result will
contain all result sets
from the query.

PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 23c
This rows object will

contain 0 or more row
objects and has a
length property
Purpose
The property length counts
total number of row
(of record)

PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 23d
the item() method of the

rows object will set the
contents of the current
row to variable row.
Purpose
The property length counts
total number of row
(of record)

PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 23e
clones the <li> element

with id = entryTemplate
Purpose
To insert each row of record
from database to each <li>
elements of

PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 23f
clears attribute id and

style from each
new <li>
Purpose
To remove unnecessary
style and duplicated id

PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 23g
stores the value of the

row’s id property as data
on the <li> itself
Purpose
Later, we will need this
data-entryId for
comparison of deleting the
entry in case the user
clicks delete button.

PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 23h
updates the label and

calories <span> child
elements of the <li> with
the corresponding data
from the row object

PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 23i
updates the label and

calories <span> child
elements of the <li> with
the corresponding data
from the row object
If we added 3 entries like this,
then, database will updates
with 3 records like that

PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 23i
[1]
ADDING CUSTOM STYLESHEET

 Now, we need to add a bit of CSS to style things up nicely for deleting each
entry for
the next step.
 Creates one new custom .css file and put the following code:
[1]
ADDING CUSTOM STYLESHEET

 For Delete button, just change class attribute of <span> from delete to
button.
 Don’t forget to import your own stylesheet into index.html
[1]
DELETING ROW
 Deleting an existing row (of record) from a database involves these below
steps:
1. binds click events to the Delete buttons as they are created by the refreshEntries()
2. removes the entry from the database
[1]
DELETING ROW
 Deleting an existing row (of record) from a database involves these below
steps:
1. binds click events to the Delete buttons as they are created by the refreshEntries()
2. removes the entry from the database
PRACTICE
REFERENCES
[1] 2012_JonathanStark_Building-android-apps-with-html, css, and-javascript[2ed]
[2] Official homepage of jQT, http://jqtjs.com/
[3] Current used version of jQT used, https://github.com/senchalabs/jQTouch/releases/
download/v1.0.1/jqt-demo-v1.0.1-0-g8a462395772f.tgz
[4] Documentation & tutorials of jQT: https://github.com/senchalabs/jQTouch/wiki
[5] SQL Tutorial, https://www.w3schools.com/sql/
[6] HTML5 Web Storage, https://www.w3schools.com/htmL/html5_webstorage.asp
[7] JavaScript Get Date Methods, https://www.w3schools.com/js/js_date_methods.asp
[8] Javascript add leading zeroes to date, https://stackoverflow.com/questions/3605214/
javascript-add-leading-zeroes-to-date
[9] SQLite, https://en.wikipedia.org/wiki/SQLite#Web_browsers

Ch05 Client Side Data Storage

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Ch05 Client Side Data Storage

Загружено:

Авторское право:

Доступные форматы

Chapter 5

CLIENT-SIDE DATA STORAGE

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS| BY SAR VATHNAK >> 1

 There are 2 kinds of web storage:

 So what is the different between local storage and session storage?

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 2

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 3

USING LOCAL STORAGE

 To set a value into a local storage:

 To access a local storage’s value with a specific key:

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 4

USING LOCAL STORAGE

 To delete a specific key/value pair from a local storage:

 To delete all key/value pair from a local storage: localStorage.clear();

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 5

SAVING USER SETTINGS TO LOCAL STORAGE [1]

 In your custom .js file, put the following code:

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6a

SAVING USER SETTINGS TO LOCAL STORAGE [1]

 In your custom .js file, put the following code:

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6b

SAVING USER SETTINGS TO LOCAL STORAGE [1]

 Note on saving user settings:

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 7

LOADING USER SETTINGS FROM LOCAL STORAGE

 In your custom .js file,

 triggers the above function when the app launches

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 8a

LOADING USER SETTINGS FROM LOCAL STORAGE

 In your custom .js file,

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 8b

LOADING USER SETTINGS FROM LOCAL STORAGE

 However, what will happen if the user navigates to the

 To rectify this kind of bad loading situation,

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 9

LOADING USER SETTINGS FROM LOCAL STORAGE

 [ More task ] We also need

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 10

SAVING THE SELECTED DATE TO SESSION STORAGE

 There are 2 main objectives in this task:

 Task 2: Updates the incoming date

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 11

SAVING THE SELECTED DATE TO SESSION STORAGE

 There are 2 main objectives in this task:

 Task 2: Updates the incoming date

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 11

SAVING THE SELECTED DATE TO SESSION STORAGE

 Task 1: Checks which item (date) the user clicked, and

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 12

SAVING THE SELECTED DATE TO SESSION STORAGE

 Task 2: Updates the incoming date panel

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 13

WEB SQL DATABASES

 The web SQL database spec:

 SQLite is a popular choice as embedded database software for local/client

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 14

A string that will refer

Your database version

The maximum number

INSERTING ROWS [1]

at the beginning of ready() function

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 16

INSERTING ROWS [1]

CLIENT-SIDE DATA STORAGE PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 17