WEBページで、チェックボックス、あるいはトグルボタンがあったとします。
チェックボックスにチェックしても、そのページを再読み込み(reload)すると、チェックボックスの選択は初期状態に戻ってしまいます。
1個や2個のチェックならまだよいですが、100個ぐらいのチェックボックスがあった場合、途中でリロードしたら、それまでにチェックしたものが全部無効になってしまうのは悲しいですね。
そこで、なんとか、チェックボックスのチェックを再読み込みしても保持する方法を考えてみました。
WEBストレージまたは、クッキーに保持するのがよいようです。
クッキーとWEBストレージ (セッションストレージ、ローカルストレージ)の違い
クッキーとWEBストレージ (セッションストレージ、ローカルストレージ) の違いは次の通りです。
| 項目 | セッションストレージ | ローカルストレージ | クッキー |
|---|---|---|---|
| データサイズ | 大（5MB） | 大（5MB） | 小（4KB） |
| 有効期限 | セッションが続く限り | 永続的 | 期限あり |
| 通信 | 発生しない | 発生しない | リクエスト都度、サーバにも送信 |
ローカルストレージに値を保存するサンプルのJavaScriptを書いてみました。
HTML5 Storage
Save. Clear. Print. HTML5 local storage.
ローカルストレージを使って、チェックボックスの状態を保持してみます。
ページの再読み込みでも、チェックボックスの状態を保持する方法
以下のJavaScript を用いれば、WEBページを再読み込みしてもチェックボックスの状態を保持します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
function getStorage(key_prefix) { // this function will return us an object with a "set" and "get" method // using either localStorage if available, or defaulting to document.cookie if (window.localStorage) { // use localStorage: return { set: function(id, data) { localStorage.setItem(key_prefix+id, data); }, get: function(id) { return localStorage.getItem(key_prefix+id); } }; } else { // use document.cookie: return { set: function(id, data) { document.cookie = key_prefix+id+'='+encodeURIComponent(data); }, get: function(id, data) { var cookies = document.cookie, parsed = {}; cookies.replace(/([^=]+)=([^;]*);?\s*/g, function(whole, key, value) { parsed[key] = decodeURIComponent(value); }); return parsed[key_prefix+id]; } }; } } jQuery(function($) { // a key prefix is used for the cookie/storage var storedData = getStorage('com_mysite_checkboxes_'); $('div.check input:checkbox').bind('change',function(){ $('#'+this.id+'txt').toggle($(this).is(':checked')); // save the data on change storedData.set(this.id, $(this).is(':checked')?'checked':'not'); }).each(function() { // on load, set the value to what we read from storage: var val = storedData.get(this.id); if (val == 'checked') $(this).attr('checked', 'checked'); if (val == 'not') $(this).removeAttr('checked'); if (val) $(this).trigger('change'); }); }); </script> |
これは中々便利なコードですよ。
プログラミングの無料レッスン体験
約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp
＜Codecampの特徴＞
1 現役エンジニアによる指導
2オンラインでのマンツーマン形式の講義
3大手企業にも導入されている実践的なカリキュラム
↓無料体験レッスン実施中です。
コメント