时间戳

首页 > 解决方案 > 尝试在重新加载时存储单选按钮选择

javascript - 尝试在重新加载时存储单选按钮选择

问题描述

我正在尝试使用 Jquery 和本地存储在 html 页面上的用户投票（是或否）上存储单选按钮选择，但它不起作用，只是在刷新时恢复为无选择。

HTML

     <label><input type="radio" name="selector" value="Yes">Yes</label><br>
            <label><input type="radio" name="selector" value="No">No</label>

查询

$(document).ready(function() {
    $(function() {
        $("input[type=radio]").on('click', function(){
            localStorage.setItem("pollselected", value);
    });
    var storedValue = localStorage.getItem("pollselected");
    if (storedValue !== null) {
        $("input[value=\""+storedValue+"\"]").click();
    }
});
});

标签： javascriptjqueryhtml

解决方案

$(this)是您短期内需要的。您需要一种方法来识别单击了哪些单选按钮。我添加了id="yes"和id="no"。为了使它不在存储object中存储 an，而是将 yes 或 no 作为选择存储。然后我们可以抓住是或否单选按钮。我为你在本地测试了这个例子。

示例：本地存储被阻止

function test(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

 
$(document).ready(function() {
    if (test() === true) { // Available
        $(function() {
            $("input[type=radio]").on('click', function() {
                let choice = $(this).attr('id'); // Get this id
                localStorage.setItem("pollselected", choice); // Store
            });

            var storedValue = localStorage.getItem("pollselected");
            if (storedValue !== null) {
                console.log(storedValue) // yes or no
                $("#" + storedValue).click(); // We could make this simpiler if we stored #yes or #no
            }
        });
    } else {
        alert('No local storage')
    }
});
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" name="selector" id="no" value="Yes">Yes</label><br>
<label><input type="radio" name="selector" id="yes" value="No">No</label>

推荐阅读