Paulo Dos Santos Paulo Dos Santos - 1 month ago 15
JSON Question

How to use localStorage to save radio and display all the items

I have this blog (https://simulatorio.blogspot.com.br/?m=2) I am developing.

This is the body code: CodePen



$(document).ready(function() {

$("input[value='wrong']").click(function() {

$(this).parent()
.addClass("wrong")
.siblings().removeClass("right wrong");

$(this).prop('checked', true);

$(this).closest('form').find("input[type='checkbox']").prop('checked', true);
});

$("input[value='right']").click(function() {
$(this).parent()
.addClass("right")
.siblings().removeClass("right wrong");

$(this).closest('form').find("input[type='checkbox']").prop('checked', true);
});

$("input[type='checkbox']").click(function() {
//$(this).parent()
//.siblings().removeClass("right wrong");

if( $(this).prop("checked") == true) {
return false;
} else {

$(this).closest('form').find("input[type='radio']").parent()
.siblings().removeClass("right wrong");

$(this).closest('form').find("input[type='radio']").prop('checked', false);

}

});

});

.switch {
position: relative;
display: inline-block;
float: right;
width: 60px;
height: 34px;
}

.switch input {display:none;}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}


.option {
background-color:#eeeeee;
background-image:url(https://1.bp.blogspot.com/-5zENhyIEpxk/WBlziC5KHEI/AAAAAAAACcw/UEZqzY0EA4cOqEgzJyHvaXrOZCm7b_oZQCLcB/s1600/circle-1.png);
background-repeat:no-repeat;
background-size: 20px 20px;
background-position:10px 50%;
display: block;
padding: 5px 10px 5px 35px ;
color: #000;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
position: relative;
text-decoration: none;
//margin-bottom: 10px;
cursor: pointer;
outline: none;
}

.option:hover {
background-color:#eeeeee;
background-image:url(https://2.bp.blogspot.com/-Fby5eMbgJsE/WBopfcqsk1I/AAAAAAAACes/1TIz_GeHcvMdOX1dflzd6aHmOJ8ZwhP1ACLcB/s1600/circle.png);
background-repeat:no-repeat;
background-size: 20px 20px;
background-position:10px 50%;
color: #000;
}

input[type="radio"] {
display: none;
opacity: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
cursor: pointer;
}

.right, .right:hover {
background-color: #4CAF50;
background-image:url(https://1.bp.blogspot.com/-PHpDpRx1uQk/WBl5t-tKDaI/AAAAAAAACdc/pCRHItQM0ZokCupwqvURZll2TwJ9CcIaACLcB/s1600/checked-symbol.png);
background-repeat:no-repeat;
background-size: 20px 20px;
background-position:10px 50%;
color: #fff;
}

.wrong, .wrong:hover {
background-color: #f44336;
background-image:url(https://1.bp.blogspot.com/-aiETYepUTDs/WBl5t32FrTI/AAAAAAAACdg/dppZ49C9vV4eJoQU3l_C7xUm0Am5UQMywCLcB/s1600/cross-mark-on-a-black-circle-background.png);
background-repeat:no-repeat;
background-size: 20px 20px;
background-position:10px 50%;
color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form3">
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
<br /><br />
<label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
<label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
<label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
<label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
<label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
<br />

</form>


<form class="form3">
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
<br /><br />
<label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
<label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
<label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
<label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
<label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
<br />
</form>


<form class="form3">
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
<br /><br />
<label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
<label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
<label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
<label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
<label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
<br />
</form>





How can I use localStorage to save the options people choose (item for the "first hit", item for the "last hit", item for the title, item for the link from the post not from the window)? And how can I display the "first hit" as a link in the sidebar? Something like this:

<a class="wrong" href="https://simulatorio.blogspot.com.br/2016/11/141602112016.html">Q141602112016</a>

<a class="right" href="https://simulatorio.blogspot.com.br/2014/10/042408102014.html">Q042408102014</a>


I know it is such a complex project, but I want some tips to start because I am finding it hard to implement.

Some exemples:
localStorage of Radio Button
http://jsfiddle.net/TzPW9/315/

Answer

In your HTML, only added ids to each of your forms.

In JS, I added functions to set, clear and retreive locally stored infos.

$(document).ready(function() {

    $("input[value='wrong']").click(function() {
        $(this).parent()
            .addClass("wrong")
            .siblings().removeClass("right wrong");

        $(this).prop('checked', true);
        $(this).closest('form').find("input[type='checkbox']").prop('checked', true);

        // Added this
        var form_id=$(this).closest('form').attr("id");
        var selection_class = $(this).attr("class");
        SaveSelection(form_id,selection_class);
    });

    $("input[value='right']").click(function() {
        $(this).parent()
            .addClass("right")
            .siblings().removeClass("right wrong");

        $(this).closest('form').find("input[type='checkbox']").prop('checked', true);

        // Added this
        var form_id=$(this).closest('form').attr("id");
        var selection_class = $(this).attr("class");
        SaveSelection(form_id,selection_class);
    });

    $("input[type='checkbox']").click(function() {
        //$(this).parent()
        //.siblings().removeClass("right wrong");

        if( $(this).prop("checked") == true) {
            return false;
        } else {
            $(this).closest('form').find("input[type='radio']").parent()
                .siblings().removeClass("right wrong");

            $(this).closest('form').find("input[type='radio']").prop('checked', false);

            // Added this
            var form_id = $(this).closest('form').attr("id");
            clearSelection(form_id);
        }
    });

    // Set a form's localStorage
    function SaveSelection(form_id,selection_class){
        console.log("Answered "+selection_class+" in form: "+form_id );
        localStorage.setItem(form_id, selection_class);
    }

    // Clear a form's localStorage
    function clearSelection(form_id){
        console.log("Clearing answer in form: "+form_id );
        localStorage.setItem(form_id, "");
    }

    // If some localStorage exist
    var form_amount = $("form").length;
    for(i=0;i<form_amount;i++){
        var stored = localStorage.getItem( $("form").eq(i).attr("id") );
        if( stored ){
            console.log("Retreiving answer for "+$("form").eq(i).attr("id")+" and simulate a click.");
            //console.log( $("form").eq(i).find("."+stored) );
            $("form").eq(i).find("."+stored).click();
        }
    }
});

See in CodePen

Feel free to ask if you need explanations...
;)