ローカルストレージに応じて要素のスタイルを変更します

Question

私はスタッフがオフィス内外にあるかどうかを設定できるトグル入力を作成しました。私はローカルストレージを使用して入力の状態を保存しています。ページに複数のトグル入力を追加すると、各入力の状態を変更することができますが、ページをリロードすると、最後の入力に設定されたローカル記憶域（つまりすべてから出力）によってすべての入力が同じになります。

各トグル状態を保存し、これを覚えておくためにローカルストレージを使用するにはどうすればよいですか？

CSSコード

<style type="text/css"> 
    .toggle { 
     -webkit-appearance: none; 
     appearance: none; 
     width: 150px; 
     height: 60px; 
     display: inline-block; 
     position: relative; 
     border-radius: 50px; 
     overflow: hidden; 
     outline: none; 
     border: none; 
     cursor: pointer; 
     background-color: red; 
     transition: background-color ease 0.3s; 
    } 

    .toggle:before { 
     content: "in out"; 
     display: block; 
     position: absolute; 
     z-index: 2; 
     width: 80px; 
     height: 70px; 
     top: -5px; 
     left: -10px; 
     background: #fff; 
     border-radius: 50%; 
     font: 30px/70px Helvetica; 
     text-transform: uppercase; 
     font-weight: bold; 
     text-indent: -40px; 
     word-spacing: 85px; 
     color: #fff; 
     text-shadow: -1px -1px rgba(0,0,0,0.15); 
     white-space: nowrap; 
     box-shadow: 0 1px 2px rgba(0,0,0,0.2); 
     transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s; 
    } 

    .toggle:checked { 
     background-color: #4CD964; 
    } 

    .toggle:checked:before { 
     left: 75px; 
    } 

    .toggle.in { 
     background-color: #4CD964; 
    } 

    .toggle.in:before { 
     left: 75px; 
    } 

</style> 

HTMLコード

<input class="toggle" type="checkbox" /> 
<input class="toggle" type="checkbox" /> 

jQueryのCODE

var toggle = $('.toggle'); 
toggle.on('click', function(){ 
    if ($('input[type=checkbox]:checked').length === 0) { 
     localStorage.setItem('result', 'out'); 
     $(this).removeClass('in'); 
    } else { 
     localStorage.setItem('result', 'in'); 
     $(this).addClass('in'); 
    } 
}) 

if (localStorage.result === 'in') { 
    toggle.addClass('in'); 
} else { 
    toggle.removeClass('in'); 
} 

Answer 1

問題は、単一の状態を保存してすべてのチェックボックスに適用しているためです。したがって、最後に適用された状態は、ページの次回のロード時にすべて与えられます。

これを修正するには、配列を使用する方がはるかに意味があります。 SOスニペットでのlocalStorageへのアクセスに制限を置くと

var $toggles = $('.toggle').on('click', function() { 
    var checkedStates = $toggles.map(function() { 
    return this.checked; 
    }).get(); 
    localStorage.setItem('checkedStates', JSON.stringify(checkedStates)); 
    $(this).toggleClass('in'); 
}) 

if (localStorage.getItem('checkedStates')) { 
    JSON.parse(localStorage.getItem('checkedStates')).forEach(function(checked, i) { 
    $('.toggle').eq(i).prop('checked', checked).toggleClass('in', checked) 
    }); 
} 

.toggle { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 150px; 
    height: 60px; 
    display: inline-block; 
    position: relative; 
    border-radius: 50px; 
    overflow: hidden; 
    outline: none; 
    border: none; 
    cursor: pointer; 
    background-color: red; 
    transition: background-color ease 0.3s; 
} 

.toggle:before { 
    content: "in out"; 
    display: block; 
    position: absolute; 
    z-index: 2; 
    width: 80px; 
    height: 70px; 
    top: -5px; 
    left: -10px; 
    background: #fff; 
    border-radius: 50%; 
    font: 30px/70px Helvetica; 
    text-transform: uppercase; 
    font-weight: bold; 
    text-indent: -40px; 
    word-spacing: 85px; 
    color: #fff; 
    text-shadow: -1px -1px rgba(0, 0, 0, 0.15); 
    white-space: nowrap; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
    transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s; 
} 

.toggle:checked { 
    background-color: #4CD964; 
} 

.toggle:checked:before { 
    left: 75px; 
} 

.toggle.in { 
    background-color: #4CD964; 
} 

.toggle.in:before { 
    left: 75px; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<input class="toggle" type="checkbox" /> 
<input class="toggle" type="checkbox" /> 

：あなたはその後、すべてのチェックボックスと再適用するときに、ページの横荷重、このような何かの状態を保存することができます、作業例については、このフィドルを参照してください。

Example Fiddle

Answer 2

checkboxesに識別子を追加する必要があります。チェックボックスがchangedになるたびに、値はlocalStorageに上書きされ、ページの読み込み時に取得されます。また、arrayを使用してlocalStorageに保存してください。カンマで区切られた文字列ではなくネイティブJSオブジェクトを使用する方が簡単になるためです。

は、両方のvaluesを保存するために、単一のkeyを使用している、あなたの現在のコードでは

var toggle = $('.toggle'); 

function updateStorage() { 
    var storage = []; 
    toggle.each(function() { 
    storage.push({ 
     name: $(this).attr('name'), 
     checked: $(this).prop('checked'), 
    }) 
    }); 
    localStorage.setItem('prefix-result', JSON.stringify(storage)); 
} 

function loadStorage() { 
    var storage = localStorage.getItem('prefix-result'); 
    storage = storage ? JSON.parse(storage) : []; 
    storage.forEach(function (item) { 
    $('input[name=' + item.name + ']').prop('checked', item.checked) 
    }) 
} 

loadStorage(); 
toggle.on('change', updateStorage); 

はJavaScript

以下

HTML

<input name="chk1" class="toggle" type="checkbox" /> 
<input name="chk2" class="toggle" type="checkbox" /> 

を参照してください。両方ともvaluesを追加しても機能しますが、前のバージョンを上書きした場合は機能しません。