Ändern des Elementstils abhängig vom lokalen Speicher

Question

Ich habe einen Umschalteingang erstellt, über den die Mitarbeiter festlegen können, ob sie sich im Büro befinden oder nicht. Ich verwende lokalen Speicher, um den Status der Eingabe zu speichern. Wenn ich mehr als einen Toggle-Eingang auf der Seite hinzufüge, kann der Status jedes Eingangs geändert werden, aber wenn ich die Seite neu lade, sind alle Eingaben aufgrund des lokalen Speichers der letzten Eingabe gleich (d. H. Alles aus).

Wie speichere ich jeden Umschaltstatus und verwende den lokalen Speicher, um sich daran zu erinnern?

CSS CODE

<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 CODE

<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

Ihr Problem besteht darin, dass Sie nur einen einzelnen Status speichern und auf alle Kontrollkästchen anwenden. Daher wird der zuletzt angewendete Zustand beim nächsten Laden der Seite allen übergeben.

Um dies zu beheben, wäre es viel sinnvoller, ein Array zu verwenden. Anschließend können Sie den Zustand von jeder Checkbox und erneut anwenden, wenn die Seite neben Lasten, etwa wie folgt:

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" /> 

Als SO legt Grenzen für den Zugriff auf localstorage in einem Snippet bitte diese Geige für ein funktionierendes Beispiel sehen:

Example Fiddle

Answer 2

Sie müssen Ihrem checkboxes eine Kennung hinzufügen. Jedes Mal, wenn eine Checkbox changed ist, wird der Wert in localStorage überschrieben und beim Laden der Seite abgerufen. Verwenden Sie auch eine array, um es in localStorage zu speichern, da es einfacher ist, mit nativen JS-Objekten als mit durch Komma getrennten Strings zu arbeiten.

Siehe unten

HTML

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

JavaScript

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); 

In Ihrem aktuellen Code, Sie beide values einzelne key speichern verwenden. Das funktioniert möglicherweise, wenn Sie beide values hinzufügen, aber nicht funktionieren, wenn Sie vorherige überschreiben.