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

Question

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 1

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...
;)

Answer 2

I have not run this code, but this logic should work.

In your HTML(Roughly):

    <div class="question" id="YOUR_QUESTION_ID">
        <p>
                Your question goes here..
        </p>
        <div class="options">
            <label><input type="radio" name="option_1"> Your option 1</label>
            <label><input type="radio" name="option_2"> Your option 2</label>
            <label><input type="radio" name="option_3"> Your option 3</label>
            <label><input type="radio" name="option_4"> Your option 4</label>
        </div>
    </div>

Jquery:

    Use the latest version of JQuery.

In your JavaScript:

    $(document).ready(function()
    {
        if (typeof(Storage) == "undefined")  
        {
            alert("Your browser doesn't support Webstorage"); //Check browser support.
        }


        for (var i = 0; i < localStorage.length; i++)
        {
            console.log(localStorage.getItem(localStorage.key(i))); // Log all previously stored values. These are the values what you want.
        }


        $("input[type='radio']").on("click",(function() //Set a click listener
        {
            var id = $(this).parent().parent().attr("id"); //There are two parents for this. Our goal is access the element with "YOUR_QUESTION_ID".
            var value = $(this).val();
            // Use the same id name as the key to store the values.
            localStorage.setItem(id,value);
            //The new id/key will be inserted or the existing key value is updated.
        }));
    });