我在使用localStorage存储输入值时遇到一个烦人的bug

Question

I want to do is to store the current inputs even if the user refresh or close the browser.

My problem is if i click Yes in the radio button and refresh the page or close the browser and reopen it the No button is checked and the Yes button is unchecked.

testing link: http://jsfiddle.net/5kcsn/124/

current script:

$(document).ready(function () {

    $('#employed_v1, #employed_v0, #test').on("change", function () {
       debugger;
        localStorage.setItem($(this).attr("id"), $(this).val())
    });


    $('#employed_v1, #employed_v0, #test').each(function (ind, val) {
            debugger;
                if ($(val).attr("id") != "employed_v1") {
                    $(val).val(localStorage.getItem($(val).attr("id")))
                }
                if ($(val).attr("id") != "employed_v0") {
                    $(val).val(localStorage.getItem($(val).attr("id")))
                }
                else {
                    if (localStorage.getItem($(val).attr("id")) == "Yes"){
                        $("#employed_v1[value=Yes]").prop("checked", true);}
                    if (localStorage.getItem($(val).attr("id")) == "No"){
                        $("#employed_v0[value=No]").prop("checked", true);} 

                }

            });



$('[id="employed_v0"]').on('click', function(){
        $('#test').val('');
        $('#test').prop('disabled', true);
     });
$('[id="employed_v1"]').on('click', function(){
        $('#test').prop('disabled', false);
     });

});

Answer 1

To store the check state you should use the checked attribute. However, here is a modified version :

$(document).ready(function () {

    $('#employed_v1, #employed_v0').on("change", function () {
        localStorage.setItem('employed', $(this).attr("id"))
    });

    $('#' + localStorage.getItem('employed')).attr('checked', true);
});

Answer 2

There are many things to consider here. First, the change-event is only fired on the one radiobutton that is clicked, and you are storing the value of the radiobutton to localstorage. But that information is the same that is already present in the HTML, so it really doesn't serve the purpose. The radiobuttons are grouped by the name-attribute, so you could store only one variable that tells which value of the radiobuttons is the selected one, here is an example:

Html:

<input type="radio" name="employed" id="employed_v1" value="Yes" required="required" class="js-store" />Yes
<br />
<input type="radio" name="employed" id="employed_v0" value="No" required="required" class="js-store" />No
<br>
<input type="text" name="test" id="test" class="js-store" />

Javascript:

  <script type="text/javascript">
    $(document).ready(function () {
        $('.js-store').on("change", function () {           
            if ($(this).is(":radio")) {                 
                localStorage.setItem($(this).attr("name"), $(this).val());
            }
            else {
                localStorage.setItem($(this).attr("id"), $(this).val());    
            }
        });

        $(".js-store").each(function() {                
            if ($(this).is(":radio")) {
                var value = localStorage.getItem($(this).attr("name"));                 
                if (value) { $(this).prop("checked", value === $(this).val()); };
            }
            else {
                var value = localStorage.getItem($(this).attr("id"));
                if (value) {$(this).val(value);}
            }               
        });
    });
</script>