是否可以在一个会话存储中存储多个输入字段值，然后使用会话存储在第二页中进行检索？

Question

I have a query on session storage how to store three fields value in a single session storage. I have three fields two radio button (in different groups) and one drop down in the first page this is how my first will look like. I was not able to get multiple field.

For example if user select pg from first radio group, aa from the second radio group and DIP EDU from the drop down third field where i need to store these values as a single session-storage from first page and i need to get the value from the first page and in the second page based on this value i need to show the div. I don't no how store multiple field value in one session storage still i tried a bit from OS users idea. But I am not getting the result :(

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

And My second div consist of another set of radio button

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

In my second page I have simple div where i need to show a label.

 <div>Second page</div>

With my current jQuery code in the first page

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);
}  

and I am calling the function in next button

this is my second page jquery code

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

But I am getting ReferenceError: session is not defined kindly please let me know what i am doing wrong here

whether my storing json data in jquery is that wrong or ...... :(

Answer 1

You can convert your input data into an object and then use JSON string to store it under one key. You have to use 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;

You can collect all the key, value pairs using jquery.
eg $('input').map(function(index, ele) { console.log(ele); }); You can perform appropriate operation on "ele" for getting required attributes, and store in yourData object.

Finally, you can store the data under one key.
sessionStorage.setItem('yourKey', JSON.stringify(yourData)); And get the JSON string back, and parse it to an object. var otherObj = JSON.parse(session.getItem('yourKey')) Now you can perform checks: if(otherObj.ug) { ... }

Answer 2

I'm not sure if I understand what you want to do, but it seems you're expecting to get both pg and alain values using $('#pg, #alain') and you treat radio buttons as check boxes, but that doesn't work.

this code should work for saving the values

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);
}

And this code can retrieve the saved value

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