根據本地存儲改變元素樣式

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代碼

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

你的問題是因爲你只保存一個狀態並將其應用到所有複選框。因此，最後應用的狀態將在頁面的下一次加載時發送給所有人。

要解決這個問題，使用數組會更有意義。然後，您可以存儲狀態每複選框，再申請時的頁面下一個負載，這樣的事情：

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

由於SO放置在訪問localStorage的一個片斷限制，請參閱本搗鼓工作示例：

Example Fiddle

Answer 2

喲需要爲您的checkboxes添加標識符。每當複選框changed覆蓋localStorage中的值並在頁面加載時檢索。此外，請使用array將其保存在localStorage中，因爲使用原生JS對象而不是逗號分隔字符串更容易。

下面

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

在你當前的代碼，使用的是單key以節省values。如果您同時添加values，但如果覆蓋前一個則不起作用。