Web Storageとは、ブラウザ標準で利用できるHTML5のデータストアの一種で、データを特定するための名前(key)と値との組み合わせでデータを管理するKey-Value型データストアです。
従来からのcookieと比べると、データサイズは、cookieが4KBに対して、Web Storageは5MBまで保存できます。またcookieは有効期限がありますが、Web Storageにはありません。
・Session Storage
ブラウザが起動している間だけ有効で、終了するとデータは削除されます。
・Local Storage
ブラウザを終了しても、データが保持されます。
以下はLocal Storageのサンプルです。。テキストフォールドになにか入力後、「データ保存」クリックで、データをローカルに保存します。「データ読み込み」ボタンクリックで、保存した内容を表示します。また、ブラウザを終了しても保存したデータは保持されます。
$(document).ready(function(){ $('#btnsave').click(function(){ if(window.localStorage){ var sdata = $('#data1').val(); var date1 = (new Date()).toLocaleString(); localStorage.setItem("key1", sdata); localStorage.setItem("key2", date1); } }); $('#btnread').click(function(){ if(window.localStorage){ $('#data2').text( localStorage.getItem("key1") ); $('#date2').text( localStorage.getItem("key2") ); } }); });