WEBページの再読み込みを行っても、チェックボックスの選択状態を保持するJavaScript

WEBページで、チェックボックス、あるいはトグルボタンがあったとします。

チェックボックスにチェックしても、そのページを再読み込み(reload)すると、チェックボックスの選択は初期状態に戻ってしまいます。

1個や2個のチェックならまだよいですが、100個ぐらいのチェックボックスがあった場合、途中でリロードしたら、それまでにチェックしたものが全部無効になってしまうのは悲しいですね。

そこで、なんとか、チェックボックスのチェックを再読み込みしても保持する方法を考えてみました。

WEBストレージまたは、クッキーに保持するのがよいようです。

クッキーとWEBストレージ (セッションストレージ、ローカルストレージ)の違い
ページの再読み込みでも、チェックボックスの状態を保持する方法
プログラミングの無料レッスン体験

クッキーとWEBストレージ (セッションストレージ、ローカルストレージ)の違い

クッキーとWEBストレージ (セッションストレージ、ローカルストレージ) の違いは次の通りです。

項目	セッションストレージ	ローカルストレージ	クッキー
データサイズ	大（5MB）	大（5MB）	小（4KB）
有効期限	セッションが続く限り	永続的	期限あり
通信	発生しない	発生しない	リクエスト都度、サーバにも送信

ローカルストレージに値を保存するサンプルのJavaScriptを書いてみました。

HTML5 Storage - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

ローカルストレージを使って、チェックボックスの状態を保持してみます。

ページの再読み込みでも、チェックボックスの状態を保持する方法

以下のJavaScript を用いれば、WEBページを再読み込みしてもチェックボックスの状態を保持します。

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>

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大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp

クッキーとWEBストレージ (セッションストレージ、ローカルストレージ)の違い

ページの再読み込みでも、チェックボックスの状態を保持する方法

プログラミングの無料レッスン体験

コメント