Ein Kontrollkästchen beim erneuten Laden der Seite dauerhaft machen?

Question

Ich habe eine Uhr basierend auf einer Fantasy-Zeitzone erstellt. Ich habe dann einen "Alarm" erstellt, der eine Warnung ausgibt, wenn ein Kontrollkästchen aktiviert ist.

Ich versuche, lokalen Speicher zu verwenden, um die Checkbox dauerhaft auf Seite neu zu laden, so dass die Leute zu anderen Seiten auf der Website gehen können, oder aktualisieren, ohne jedes Mal das Kästchen ankreuzen zu müssen.

Ich kann es nicht scheinen, obwohl zu arbeiten, und ich habe durch viele ähnliche Fragen gewesen, wie diese: how to Keep checkbox checked after refresh the page

ist hier ein codepen des Codes ich habe: http://codepen.io/anon/pen/xqRWJM?editors=1111

Hier ist der hTML-Code für das Kontrollkästchen:

<div id="alert">Alert me when it's night time: 
<input id="alertme" type="checkbox"></input> 
</div> 

Answer 1

ich einen einfachen Stift für Sie gemacht haben, die zeigt, wie das Kontrollkästchen Zustand mit der Localstorage API speichern. Hoffentlich können Sie dies Ihren spezifischen Bedürfnissen anpassen.

http://codepen.io/oculusriff/pen/RpoJWQ?

HTML

<input type="checkbox" id="test" /> <label for="test">Test</label> 

JavaScript

function App() {} 

App.prototype.setState = function(state) { 
    localStorage.setItem('checked', state); 
} 

App.prototype.getState = function() { 
    return localStorage.getItem('checked'); 
} 

function init() { 
    var app = new App(); 
    var state = app.getState(); 
    var checkbox = document.querySelector('#test'); 

    if (state == 'true') { 
    checkbox.checked = true; 
    } 

    checkbox.addEventListener('click', function() { 
     app.setState(checkbox.checked); 
    }); 
} 

init(); 

Cheers, Josh