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

你的问题是因为你只保存一个状态并将其应用到所有复选框。因此，最后应用的状态将在页面的下一次加载时发送给所有人。

要解决这个问题，使用数组会更有意义。然后，您可以存储状态每复选框，再申请时的页面下一个负载，这样的事情：

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

哟需要为您的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，但如果覆盖前一个则不起作用。