localstorageからチェックボックスの値を取得する方法

Question

チェックボックスの質問がたくさんあるページがあり、それが送信されて次のページに移ると、このページは更新され、既に迷惑をかけている可能性のあるクライアントは、再度形成する。 私はlocalstorageをセットアップしましたので、すべてのチェックボックスをもう一度選択する必要はなく、彼はフォームと彼の背中を再送信する必要があります。

問題ページに値が入力されたままにしておくと、このフェラは元に戻って再送信する必要はありません。

//SIZE SAVE 
 
function save() { 
 
    localStorage.setItem('100', checkbox.checked); 
 
    var checkbox = document.getElementById('100'); 
 
    localStorage.setItem('200', checkbox.checked); 
 
    var checkbox = document.getElementById('200'); 
 

 
    //SIZE LOAD 
 
    function load() { 
 
    var checked = JSON.parse(localStorage.getItem('100')); 
 
    document.getElementById("100").checked = checked; 
 
    var checked = JSON.parse(localStorage.getItem('200')); 
 
    document.getElementById("200").checked = checked; 
 

 

 
    //THIS PAGE NEEDS THE CHECKMARK 
 
    echo get_site_url(). 
 
    "/the/checkmark/selected/was/".$_POST['check_group']. 
 
    "/.png"; 
 
    }

localStorage

Answer 1

2つの主要な機能、getItemとsetItemを有しています。 setItemの場合は、キーと値を渡します。そのキーに再度書き込むと、その値が書き換えられます。ボックスがチェックされているのであれば、あなたの場合には、あなたは

localStorage.setItem("checkbox_value", true) 

をするでしょうし、それがオフになったときには、代わりにfalseを渡します。あなたはそのようにjQueryを使って見ることができます値を取得するには、次の

$(checkbox).is(':checked') 

を、真または偽に渡すために簡単なのif-else句を使用します。あなたが$(document).ready()に、あなたのページをリロードするとき、あなたは

localStorage.getItem(key) 

を使用して値を取得し、チェックボックスの値を設定するためにJavaScriptを使用することができます。

localStorageのみで文字列を保存できます。ループを使用して、すべてのチェックボックスの値をいくつかの区切り記号で区切った文字列を作成することができます。たとえば、値がtrueのfalseチェックボックスが4つある場合は、文字列は "true \ nfalse \ nfalse \ ntrue"になります。\ nは区切り文字です。あなたはlocalStorageでその文字列を格納することができますし、あなたがそれを取得するとき、あなたはそのような配列にすべての値を置くことができます。

array = localStorage.getItem(key).split('\n'). 

その後、あなたはその新しく取得した配列を使ってチェックボックスを移入することができます。何か明確化が必要かどうか尋ねる。

Answer 2

あなたのフォームからすべてのチェックボックスの管理を行うためにいくつかのコードを書くと、今のところ特に機能が簡単だと思います。

まず、すべてのチェックボックスを1つの場所にグループ化すると最適です。あなたがlocalStoargeに保存したいすべてのチェックボックスセレクタを宣言することができ、このような関数に

（今、あなたのコードに複数の場所に、各セレクタの変数を作成する必要はありません）

function getCheckboxItems() { 
    return ['100', '200'] 
     .map(function(selector) { 
      return { 
       selector: selector, 
       element: document.getElementById(selector) 
      }`enter code here` 
     }); 
} 

次に、物事をはるかに簡単にするために、複数のキーに結果を保存するのではなく、チェックボックスのすべての値を単一のオブジェクトに保存できます。このようにして、管理を簡単にします（すべての値を消去したい、一部のみ更新）

次の関数は、上記の関数のすべてのチェックボックス項目を引数としてとります。上の関数はチェックボックスIDとチェックボックス要素で配列を返します。すべてのIDと値は、この後、あなたはちょうどあなたがlocalStorgeからすべての値を読み、「確認」あなたのチェックボックスの状態にそれらを配置します別の関数を必要とし、この後のlocalStorage

function serializeCheckboxes(elements) { 
    var container = elements.reduce(function (accumulator, item) { 
     accumulator[item.selector] = item.element.checked; 
     return accumulator; 
    }, {}) 

    localStorage.setItem('container', JSON.stringify(container)); 
} 

function save() { 
    var elements = getCheckboxItems(); 
    serializeCheckboxes(elements); 
} 

にオブジェクトを保存します

function readCheckboxes() { 
    var storage = localStorage.getItem('container'), //Your key 
     container = (storage) ? JSON.parse(storage) : {}; 

    Object.keys(container).forEach(function(key) { 
     var element = document.getElementById(key); 

     if(element) { 
      element.checked = container[key]; 
     } 
    }); 
} 

これはあなたの問題を管理できるシンプルなサービスですが、追加の変更については、このソリューションを複数の変数に保存するのではなく、このソリューションをもっと簡単にカスタマイズできます。対応するidを最初の関数から配列に追加します。ここ

ライブ例： https://jsbin.com/xejibihiso/edit?html,js,output