如何使用 localStorage 保存收音机并显示所有项目

Question

我正在开发这个博客 (https://simulatorio.blogspot.com.br/?m=2)。

这是正文代码：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>

如何使用 localStorage 保存人们选择的选项（“第一次点击”的项目，“最后一次点击”的项目，标题的项目，帖子链接的项目而不是窗口的项目）？以及如何在侧边栏中将“第一次点击”显示为链接？像这样的：

<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>

我知道这是一个如此复杂的项目，但我想从一些技巧开始，因为我发现它很难实施。

一些例子： localStorage of Radio Button http://jsfiddle.net/TzPW9/315/

Answer 1

我还没有运行这个代码，但是这个逻辑应该可以工作。

在您的 HTML 中（大致）：

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

在你的 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.
        }));
    });

Answer 2

在您的 HTML 中，仅为您的每个表单添加 id。

在 JS 中，我添加了设置、清除和检索本地存储信息的功能。

$(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();
        }
    }
});

见CodePen

如果您需要解释，请随时询问...
;)