Tizen, HTML5 Web Storage

2014. 12. 01

Ajou Univrsity

Contents

• Web Storage API

• local storage

• session storage

• Tutorial

• demo

• code analysis

Ajou Univrsity

Web StorageSession Storage, Local Storage

Ajou Univrsity

Web Storage

• Tizen supports the W3C Web Storage API.

• A Web storage stores data in the key-value format. This process is similar to existing cookies, but by using it,• structured objects can be stored

• the storage capacity increased to 5MB per domain

• no server request is needed (server traffic is significantly reduced)

• Two storage types exist:

Local storage Session storage

scope stores data to be used in multiple windows, beyond the current session, with no expiration data.

only a single session. The data stored in a temporary storage can be shared in all browser windows within the same domain

duration he stored data is not deleted when the browser window is closed

once the browser window is closed, data is deleted.

Ajou Univrsity

Web Storage

<<Interface>>

Storage

readonly attribute unsigned long length;DOMString? key(unsigned long index);getter DOMString getItem(DOMString key);setter creator void setItem(DOMString key, DOMString value);deleter void removeItem(DOMString key);void clear();

<<Interface>>

WindowSessionStorage

readonly attribute Storage sessionStorage;

<<Interface>>

WindowLocalStorage

readonly attribute Storage localStorage;

the number of key/value pairs

the name of the nth key

the key/value pair with the given key to be removed

emptied of all key/value pairs

represents the set of storage areas

a set of local storage areas

Ajou Univrsity

Tutorialdemo, code analysis

Ajou Univrsity

Tutorial

• Go to ‘Tizen Dev Guide’ page.

• https://developer.tizen.org/ko/documentation/dev-guide/2.2.1?langredirect=1

click the web storage tutorial code link

Ajou Univrsity

Tutorial

This tutorial page shows how to save, remove, and clear data in a local storage and a session storage.

Ajou Univrsity

Tutorial

When you clicked the save button, data is added to local and session storage

Ajou Univrsity

Tutorial

2. Open tutorial page again

Session storage data is deleted.

Local storage data remained

1. Get out the page

Ajou Univrsity

Tutorial Code Analysis

• Web storage tutorial page initially loads local and session storage data

• It enables remaining storage data when the page is refreshed

Ajou Univrsity

Tutorial Code Analysis

Call addStorage()

Call removeStorage()

Call clearStorage()

Ajou Univrsity

Tutorial Code Analysis

• addStorage()

Get key and value data what you wrote

Add key and value to the local storage list

Add key and value to the session storage list

Ajou Univrsity

Tutorial Code Analysis

• removeStorage()

Get key data what you wrote

Remove key and value which is same with input key data in the local storage list

Remove key and value which is same with input key data in the session storage list

Ajou Univrsity

Tutorial Code Analysis

• clearStorage()

Remove all key/value pairs in the local storage list

Remove all key/value pairs in the session storage list

Ajou Univrsity

Reference

Dev Guide 2.2.1

https://developer.tizen.org/ko/documentation/dev-guide/2.2.1

Web storage tutorial

http://download.tizen.org/misc/examples/w3c_html5/storage/web_storage/local_s

torage_session_storage.htm