tizen ver2.2 - html5 web storage
TRANSCRIPT
![Page 1: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/1.jpg)
Tizen Ver2.2 - HTML5 Web Storage
2014. 12. 01
![Page 2: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/2.jpg)
Ajou Univrsity
Contents
• Web Storage API
• local storage
• session storage
• Tutorial
• demo
• code analysis
![Page 3: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/3.jpg)
Ajou Univrsity
Web StorageSession Storage, Local Storage
![Page 4: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/4.jpg)
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.
![Page 5: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/5.jpg)
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
![Page 6: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/6.jpg)
Ajou Univrsity
Tutorialdemo, code analysis
![Page 7: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/7.jpg)
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
![Page 8: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/8.jpg)
Ajou Univrsity
Tutorial
This tutorial page shows how to save, remove, and clear data in a local storage and a session storage.
![Page 9: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/9.jpg)
Ajou Univrsity
Tutorial
When you clicked the save button, data is added to local and session storage
![Page 10: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/10.jpg)
Ajou Univrsity
Tutorial
2. Open tutorial page again
Session storage data is deleted.
Local storage data remained
1. Get out the page
![Page 11: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/11.jpg)
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
![Page 12: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/12.jpg)
Ajou Univrsity
Tutorial Code Analysis
Call addStorage()
Call removeStorage()
Call clearStorage()
![Page 13: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/13.jpg)
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
![Page 14: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/14.jpg)
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
![Page 15: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/15.jpg)
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
![Page 16: Tizen Ver2.2 - HTML5 Web Storage](https://reader030.vdocuments.us/reader030/viewer/2022041014/624f4a1c1c93b2325e573417/html5/thumbnails/16.jpg)
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