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

标签 javascript jquery ajax local-storage

目前在本地存储上工作,如果用户在第二页面板中选择第一个单选按钮必须隐藏,那么在第一页我有两个单选按钮。如果用户从第二页验证中选择单选按钮一个文本字段,我不知道如何使用 localStorage 或 ajax 哪个最好

当我看到 SO 时,我得到了一些东西 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();
}

最佳答案

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

现在您拥有两个 radio 的值,您可以使用 getItem() 在第二页中使用它们:

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

像这样,如果选中第一页中的第一个 radion,面板将被隐藏。

关于javascript - 如何使用 localstorage/ajax jquery 从第一页到第二页获取单选按钮值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33463016/

相关文章:

javascript - 为什么在使用 ES6 和 ReactJS 时必须使用 bind?

php - 仅当所有 td 都具有特定类别时,如何向 tr 添加类别?

javascript - 无法在我的 HTML 页面上显示另一个 Highcharts 图表 - Django

ajax - IOS9 WKWebView访问控制允许来源

javascript - 将子文档填充到父文档中 Array Mongoose

javascript - mongoDB ISO日期到字符串与moment.js时区转换

javascript - 如果有人将其域名指向我的服务器, "Access-Control-Allow-Origin"是否可以帮助我?

javascript - 我想根据数据选项卡 ID 选择复选框

c# - 如何在 AJAX 回调(回发)期间生成 JavaScript,然后在浏览器上执行它?

javascript - MySQL 和 AJAX,可以在其中之一中运行,但不能在另一个中运行