是否可以在一个会话存储中存储多个输入字段值,并使用会话存储在第二页中检索?

时间:2015-11-09 18:25:51

标签: javascript jquery html5 local-storage

我对会话存储有一个查询,如何在单个会话存储中存储三个字段值。我有三个字段两个单选按钮(在不同的组中)和一个下拉在第一页中这是我的第一个看起来像。我无法获得多个领域。

例如,如果用户从第一个广播组中选择 pg ,则从第二个广播组中选择 aa ,从下拉第三个字段中选择 DIP EDU 我需要将这些值作为单个会话存储从第一页存储,我需要从第一页获取值,在第二页中根据此值我需要显示div。我不是没有如何在一个会话存储中存储多个字段值仍然我尝试了一些OS用户的想法。但我没有得到结果:(

<div class="edu">
   <input type="radio" id="ug" name="edu" class="ug" value="ug" checked="checked">
   <label class="radio-label">Undergraduate</label>
   <input type="radio" id="pg" name="edu" value="pg" class="pg">
   <label class="radio-label">Postgraduate</label>
   <input type="radio" id="cu" name="edu" value="cu" class="cu">
   <label class="radio-label">Continuing Education</label>                          
</div>

我的第二个div包含另一组单选按钮

 <div class="rad_cam">
   <input id="ad" class="ad" type="radio" name="cam" value="ad" checked>
   <label class="radio-label">AD</label>
   <input id="AA" class="AA" type="radio" name="cam" value="AA">
   <label class="radio-label">AA</label>
 </div>
<select class="mslt_Field slt_mjrpg ipt_required" id="slt_mjrpg" name="slt_mjrpg">
   <option value="">Please Select</option>
   <option value="Dip - Prof. PG Dip in Teaching ">DIP EDU</option>
   <option value="Master of Science in Finance ">MASF</option>
   <option value="MBA">MBA 2013</option>
</select>

在我的第二页中,我有一个简单的div,我需要显示一个标签。

 <div>Second page</div>

使用我在第一页的当前jQuery代码

function storedata(){
alert("check");
var storeDate = {},key,val;
key = $('#pg,#alain').attr('id');
val = $('#pg,#alain').is(':checked');
storeDate[key] = val;   
sessionStorage.setItem('storeDate', JSON.stringify(storeDate));
console.log(key);
}  

我在下一个按钮中调用该功能

这是我的第二页jquery代码

var otherObj = JSON.parse(session.getItem('storeDate'));
    if(otherObj.ug && otherObj.alain){
        alert("check");
    }

但是我得到了ReferenceError:会话没有明确定义请告诉我这里我做错了什么

我在jquery中存储json数据是错误还是...... :(

2 个答案:

答案 0 :(得分:1)

您可以将输入数据转换为对象,然后使用JSON字符串将其存储在一个键下。你必须使用JSON lib。 https://bestiejs.github.io/json3/#section_3
var yourData = {}, key, val; key = $('input.ug').attr('id'); val = $('input.ug').is(':checked'); yourData[key] = val;

您可以使用jquery收集所有键值对 例如$('input').map(function(index, ele) { console.log(ele); }); 您可以对“ele”执行适当的操作以获取所需的属性,并将其存储在yourData对象中。

最后,您可以将数据存储在一个键下 sessionStorage.setItem('yourKey', JSON.stringify(yourData)); 然后获取JSON字符串,并将其解析为对象。 var otherObj = JSON.parse(session.getItem('yourKey')) 现在您可以执行检查:if(otherObj.ug) { ... }

答案 1 :(得分:1)

我不确定自己是否明白自己想要做什么,但似乎您希望使用pg同时获得alain$('#pg, #alain')值您将单选按钮视为复选框,但这不起作用。

此代码应该用于保存值

function storedata() {
  var storeDate = {};

  // get the id of the selected radio button
  storeDate['storedValue1'] = $('input[name=edu]:checked').val();
  storeDate['storedValue2'] = $('input[name=cam]:checked').val();

  // save the item
  sessionStorage.setItem('storeDate', JSON.stringify(storeDate));
  console.log(storeDate);
}

此代码可以检索保存的值

var otherObj = JSON.parse(sessionStorage.getItem('storeDate'));
if (otherObj.storedValue1 && otherObj.storedValue2) {
  console.log(otherObj);
}