如何使用localstorage / ajax jquery从第一页到第二页获取单选按钮值
Posted
技术标签:
【中文标题】如何使用localstorage / ajax jquery从第一页到第二页获取单选按钮值【英文标题】：How to get radio button value from first page to second page using localstorage / ajax jquery 【发布时间】：2016-02-01 11:23:09 【问题描述】：目前正在处理本地存储，如果用户在第二页面板中选择第一个单选按钮，则在第一页我有两个单选按钮必须隐藏。如果用户从第二页验证中选择单选按钮一个文本字段不应该发生我不知道如何使用 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> </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();
【问题讨论】：
你为什么不在服务器上使用提交的值呢？ 我想使用 localstorage / Jquery / Ajax 我不想使用 php，因为我当前的页面不支持 PHP 您可以在第一页使用 ajax 将单选按钮的值存储在数据库中，并在第二页中检索这些值 【参考方案1】：持久性存储：在明确删除之前一直存在
localStorage.setItem("key_name", "stringValue");
localStorage.getItem("key_name");
Non-Persistence Storage：一旦窗口关闭，存储就会被删除。
sessionStorage.setItem("key_name", "stringValue");
sessionStorage.getItem("key_name");
存储来自任何页面的数据并在需要时检索它。
首页（部分代码）：
<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>
第二页（部分代码）：
$(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");
);
【讨论】：
感谢您的帮助，但我收到错误 assignValue is not defined 在我的第一个 html 页面中，我正在调用这个 assignValue();我已将您的函数名称更改为骆驼大小写，因为我正在使用这种格式 AssignValue() 函数在您的 FirstPage 的标题或正文部分中定义，并且应该在单击按钮时调用它 () 是的，我定义了正文部分的结尾，我已经申请了 onclick 你的第一页有问题，请用上面的代码创建一个示例页面并独立执行，它可以工作。 嗨@Sudipta，默认情况下，当用户直接单击第二页时，div 被隐藏，它不应该只有当用户从第一页选择单选按钮时，第二页 div 必须隐藏【参考方案2】：看看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();
这样，如果第一页的第一个radion被选中，面板将被隐藏。
【讨论】：
如果任何用户打开第二页，那么它应该打开所有不应该隐藏的 div 是否可以使用 localstorage 嗨 @Zakaria 感谢您的回答，但是当我签入本地存储时，我的应用程序已经厌倦了，我无法看到任何价值，请帮助我 嗨 @Zakaria 我收到错误 ischecked is not a function localStorage.setItem('second_radio', $('#basicForm #pg').isChecked()); 对不起@Mahadevan 它应该是.is(':checked') 检查我更新的答案。
如果答案有助于投票，如果答案真的是您想要的，请将其标记为正确答案，祝您好运。以上是关于如何使用localstorage / ajax jquery从第一页到第二页获取单选按钮值的主要内容，如果未能解决你的问题，请参考以下文章
显示来自 localStorage 缓存的数据，然后使用来自服务的 AJAX 结果进行更新
从 localStorage 获取值以在 Sencha Touch AJAX 代理中使用