tizen, html5 web storage · 2015-06-18 · ajou univrsity web storage •tizen supports the w3c web...
TRANSCRIPT
![Page 1: Tizen, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/html5/thumbnails/1.jpg)
Tizen, HTML5 Web Storage
2014. 12. 01
![Page 2: Tizen, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/html5/thumbnails/2.jpg)
Ajou Univrsity
Contents
• Web Storage API
• local storage
• session storage
• Tutorial
• demo
• code analysis
![Page 3: Tizen, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/html5/thumbnails/3.jpg)
Ajou Univrsity
Web StorageSession Storage, Local Storage
![Page 4: Tizen, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/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, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/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, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/html5/thumbnails/6.jpg)
Ajou Univrsity
Tutorialdemo, code analysis
![Page 7: Tizen, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/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, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/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, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/html5/thumbnails/9.jpg)
Ajou Univrsity
Tutorial
When you clicked the save button, data is added to local and session storage
![Page 10: Tizen, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/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, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/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, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/html5/thumbnails/12.jpg)
Ajou Univrsity
Tutorial Code Analysis
Call addStorage()
Call removeStorage()
Call clearStorage()
![Page 13: Tizen, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/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, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/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, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/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, HTML5 Web Storage · 2015-06-18 · Ajou Univrsity Web Storage •Tizen supports the W3C Web Storage API. •A Web storage stores data in the key-value format. This process](https://reader033.vdocuments.site/reader033/viewer/2022041721/5e4e7337cc404649e86b4636/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