Question

当前正在处理本地存储在第一页中我有两个单选按钮，如果用户选择第二页面板中的第一个单选按钮必须隐藏。如果用户选择单选按钮，则不应该从第二页验证中发现一个文本字段，我不知道如何使用localStorage或ajax哪一个是最好的

当我看到我得到的东西window.localStorage.setItem("key_name", "stringValue");

请指导我如何使用它：

首页代码

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <title>First page</title>
</head>
<body>
 <form id="first_pge" class="first_pge" action="second.page">
<input type="radio" name="radio" id="first_radio"/>
  <input type="radio" name="radio" id="second_radio"/>
  <input type="button" value="submit" id="btn_sub"/>
  </form
</body>
</html>

第二页

<!DOCTYPE html>
<html>

 <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.min.js"></script>
    <script>
            jQuery.validator.setDefaults({
                    debug: true,
                    success: "valid"
            });
            $("#myform").validate({
                    rules: {
                            field: {
                                    required: true
                            }
                    }
            });
    </script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
            .div_panel {
                    background-color: yellow;
                    font-size: 16px;
            }
    </style>
 </head>
 <body>
    <form id="myform" class="myform">
            <div class="div_panel">First</div>
            <div>&nbsp</div>
            <input type="text" id="field" class="field" />
            <input type="button" required value="Submit" id="btn_sub1" />
    </form>
   </body>
 </html>

目前使用jquery按照以下用户帮助我。

在我设置的第一页

            storeData();
        function storeData()
            {
                alert("check");
                localStorage.setItem('pg', $('#basicForm #pg').attr('checked', 'checked'));
                //alert("yes" + getd);
                localStorage.setItem('cu', $('#basicForm #cu').attr('checked', 'checked'));
            }

当我在默认情况下在第二页中设置此项时，如果用户直接打开第二页，则隐藏特定div：（

请帮助我

if( localStorage.getItem('pg') )
{
    $('#edu_info').hide();
}

Answer 1

看看 HTML5 Local Storage ，它真的很容易使用。

我认为您必须在表单中添加onsubmit()并在localstorage中存储您想要的值，然后在第二页中使用localstorage.getItem()获取这些值。

在表单中添加onSubmit事件，该事件将调用名为storeData()的函数，该函数会将您的单选按钮值添加到localstorage：

<form id="first_pge" class="first_pge" action="second.page" onsubmit="storeData()">

添加功能storeData()：

<script>
    function storeData()
    {
        localStorage.setItem('first_radio', $('#first_pge #first_radio').is(':checked'));
        localStorage.setItem('second_radio', $('#first_pge #second_radio').is(':checked'));
    }
</script>

现在您拥有两个无线电的价值，您可以使用getItem()在第二页中使用它们：

if( localStorage.getItem('first_radio') )
{
    $('.div_panel').hide();
}

如果选中第一页中的第一个辐射，则会隐藏面板。

Answer 2

持久存储：持续存储直到明确删除

 localStorage.setItem("key_name", "stringValue");
 localStorage.getItem("key_name");

非持久性存储：关闭窗口后，将删除存储。

 sessionStorage.setItem("key_name", "stringValue");
 sessionStorage.getItem("key_name");

存储来自任何页面的数据并在需要时检索它。

FirstPage（部分代码）：

<body>
<form id="first_pge" class="first_pge" action="second.page">
    <input type="radio" name="radio" id="first_radio"  />
    <input type="radio" name="radio" id="second_radio" />
    <input type="button" value="submit" id="btn_sub" onclick="AssignValue();"/>
</form>
<script type="text/javascript">
    function AssignValue() {
        var checkedRadioValue = -1;
        if (document.getElementById("first_radio").checked)
            checkedRadioValue = 1;
        else if(document.getElementById("second_radio").checked)
            checkedRadioValue = 2;

        //Radio button selection - use jquery (if required).
        sessionStorage.setItem("CheckedRadioValue", checkedRadioValue);
        //localStorage.setItem("CheckedRadioValue", checkedRadioValue);
  }
</script>
</body>

SecondPage（部分代码）：

    $(document).ready(function () {
        if (sessionStorage.getItem("CheckedRadioValue") != null) {
            var checkedRadioValue = parseInt(sessionStorage.getItem("CheckedRadioValue"));
            //var checkedRadioValue = parseInt(localStorage.getItem("CheckedRadioValue"));
            if (checkedRadioValue != -1) {
                if (checkedRadioValue == 1) {
                    //$(".div_panel").hide();
                    //Hide panel
                }
                else {
                    //Do page validation 
                }
            }
            sessionStorage.removeItem("CheckedRadioValue");
            //localStorage.removeItem("CheckedRadioValue");
        }  
    });

如何使用localstorage / ajax jquery从第一页到第二页获取单选按钮值

2 个答案: