根据本地存储改变元素样式

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，但如果覆盖前一个则不起作用。