使用localStorage保存一個複選框的值

Question

我有一個顯示/隱藏div被切換到複選框狀態，雖然它工作正常我想有localStorage保存複選框狀態，但我不知道如何實現本地存儲部分代碼以及放置位置。任何幫助感激地收到。

$(document).ready(function() { 
    $('#checkbox1').change(function() { 
     $('#div1').toggle(); 
    }); 
}); 

<input type="checkbox" id="checkbox1" value="1" /> 
<div id="div1">Text to be toggled</div> 

Answer 1

試試這個：http://jsfiddle.net/sQuEy/4/

checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false; 

Answer 2

檢查：

LocalStorage

$(document).ready(function() { 
    $('#checkbox1').change(function() { 
    $('#div1').toggle(); 
    if (typeof(Storage) !== "undefined") { 
     localStorage.setItem("CheckboxValue", $('#checkbox1').is(":checked")); 
    } else { 
     console.log("No Support for localstorage") 
    } 
    }); 
}); 

Answer 3

jsfiddle

jQuery(function($) { // Shorter document ready & namespace safer 

    // initiate the state 
    var checked = localStorage.getItem('checkbox1') 
    if (checked) { 
    $('#div1').hide() 
    $('#checkbox1').prop('checked', true) 
    } 

    // Toggle the visibility 
    $('#checkbox1').change(function() { 
    $('#div1').toggle(); 
    this.checked 
     ? localStorage.setItem(this.id, true) 
     : localStorage.removeItem(this.id) 
    }); 
}); 

Answer 4

我必須將複選框的值保存在本地存儲中，也許這會引導您將數據存儲在本地存儲中。 我做了一個複選框和一個按鈕。在點擊「保存」按鈕時，會調用一個函數，該函數獲取複選框的ID並將其與localStorage.setItem（）一起存儲。

<input type="checkbox" id="cb1">checkbox</input> 
    <button type="button" onClick="save()">save</button> 
    function save() {  
    var checkbox = document.getElementById("cb1"); 
    localStorage.setItem("cb1", checkbox.checked); 
    } 

    //for loading 
    var checked = JSON.parse(localStorage.getItem("cb1")); 
    document.getElementById("cb1").checked = checked;