Tutorial Web Storage dengan HTML5

Saya share lagi Tutorial HTML5 , yaitu Tutorial Web Storage dengan HTML5,,
HTML5 ini menawarkan dua objek baru untuk menyimpan data pada klien:

• localStorage = menyimpan data tanpa batas waktu 
• sessionStorage = menyimpan data untuk satu sesi 

Sebelumnya, hal ini dilakukan dengan cookie. Cookies tidak cocok untuk sejumlah besar data, karena mereka diteruskan oleh setiap permintaan ke server, sehingga sangat lambat dan efektif.

Dalam HTML5, data tidak diteruskan oleh setiap permintaan server, tetapi digunakan hanya ketika meminta. Hal ini dimungkinkan untuk menyimpan sejumlah besar data tanpa mempengaruhi kinerja website.

Data disimpan di daerah yang berbeda untuk website yang berbeda, dan sebuah situs web hanya dapat mengakses data yang tersimpan dengan sendirinya.

HTML5 menggunakan JavaScript untuk menyimpan dan mengakses data.
The localStorage Object

Contoh :

<script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>


Contoh berikutnya ini menghitung berapa kali seorang pengguna telah mengunjungi halaman:

<script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s)."); </script>


The sessionStorage Object 

Objek sessionStorage adalah tempat untuk menyimpan data untuk satu sesi. Data tersebut dihapus saat pengguna menutup jendela browser.

Cara membuat dan mengakses sessionStorage :

Contoh :

<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>


Contoh berikut ini menghitung berapa kali seorang pengguna telah mengunjungi halaman, dalam sesi saat ini:

<script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits "+sessionStorage.pagecount+" time(s) this session."); </script>