How to pass Array of JSON Data from one html page to other html page?

Question

I am creating profile page for user. I have two html page: page1: login.html and page2:profile.html. From one page:1 we login, after successfully login, it will redirect to userProfile page:2. I am sending the user info from page1 to page2, like Name, Address, Mobile Number, Email-Id etc, in form of JSON,

I want to use sesstion, but not localStorage

Format of JSON is

[{"userInfo":{"id":"1","username":"nee","Name":"Neelabh", "address":"Bangalore","Email":"[email protected]"}}]

I use this reference for help: JqueryMobile (JQM), Json and passing data to a new page

JavaScript in Login Page:

 <script type="text/javascript">     
    $(document).ready(function(){       
                var userData = {
                 storeUserDataInSession: function(userData) {
                     var userObjectString = JSON.stringify(userData);                         
                window.sessionStorage.setItem('userObject',userObjectString)
                 },
                 getUserDataFromSession: function() {
                     var userData = window.sessionStorage.getItem('userObject')
                     return JSON.parse(userData);
                 }
                }   

               $("#register-form-header").submit(function(){            

                var uName = $('#userName').val();               
                var upassd=$('#password').val();            

                $.ajax({                                        
                    url:"http://localhost/login/login.php",                     
                    type:"POST",
                    dataType:"json",
                    data:{type:"login",uName:uName,password:upassd},                    

                    ContentType:"application/json",
                    success: function(response){    
                        $.each(response, function(index,value){                           


                        }); 
                        //alert(JSON.stringify(response[0]));

               userData.storeUserDataInSession(response);

                        window.location = 'userProfile.html';   
                        return false;                                   
                    },
                    error: function(err){                           
                        //alert(JSON.stringify(err));
                        alert("fail");
                        window.location.href = 'error.html';
                    }           
                });
                return false; 

        });
        //loadJSON(0);
    });
</script>

javascript in Profile Page

<script>

  $( document ).ready(function() {
       var userData = {
         storeUserDataInSession: function(userData) {
             var userObjectString = JSON.stringify(userData);
             window.sessionStorage.setItem('userObject',userObjectString)
         },
         getUserDataFromSession: function() {
             var userData = window.sessionStorage.getItem('userObject')
             return JSON.parse(userData);
         }
        } 

        var userDataObject=userData.getUserDataFromSession();
        var data=userDataObject[0].userInfo.username;           
        alert(data);            
  }); 
</script>

This profile page success fully able to print HardcodedInfo "Neelabh", I don't know How to send the JSON array of data to other page, Please check I mentioned Array of Json Data,

PHP code

$result=mysql_query($query);
            $totalRows=mysql_num_rows($result); 
            if($totalRows>0){
                $recipes=array();
                while($recipe=mysql_fetch_array($result, MYSQL_ASSOC)){
                    $recipes[]=array('userInfo'=>$recipe);
                }
                echo json_encode($recipes);         
            }

Above code is working code Thanks to Mateusz Majewski

If you want consistency across browsers on mobile devices, you will have to use cookies to pass the data unfortunately. Local/SessionStorage is not supported on Safari's private browsing mode. — o--oOoOoO--o
– o--oOoOoO--o, Commented Mar 3, 2015 at 12:13

Mateusz Majewski · Accepted Answer · 2015-03-03 12:21:03Z

2

var userData = {
 storeUserDataInSession: function(userData) {
     var userObjectString = JSON.stringify(userData);
     window.sessionStorage.setItem('userObject',userObjectString)
 },
 getUserDataFromSession: function() {
     var userData = window.sessionStorage.getItem('userObject')
     return JSON.parse(userData);
 }
}

Then in your success() callback you do

userData.storeUserDataInSession(response);

To retrieve the data you run

userData.getUserDataFromSession()

answered Mar 3, 2015 at 12:21

Mateusz Majewski

2801 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Neelabh Singh Over a year ago

Where I will define this function, var userData = { storeUserDataInSession: function(userData) { var userObjectString = JSON.stringify(userData); window.sessionStorage.setItem('userObject',userObjectString) }, getUserDataFromSession: function() { var userData = window.sessionStorage.getItem('userObject') return JSON.parse(userData); } }

Mateusz Majewski Over a year ago

@neelabhsingh you can do it in $(document).ready(function() block, but it doesn't matter. It will be accessible from anywhere

Neelabh Singh Over a year ago

please check We have to use response[0] in userData.storeUserDataInSession(JSON.stringify(response[0])); I have one more Question How I will get Seperate data, Name, Email, Mobile in userprofile page..

Mateusz Majewski Over a year ago

You can do this: var userDataObject = userData.getUserDataFromSession() . Then you can retrieve the email like this: userDataObject[0].userInfo.Email.

Neelabh Singh Over a year ago

Thansk for reply, As you suggested me It is not working, var data=userDataObject[0].userInfo.username;

|

Collectives™ on Stack Overflow

How to pass Array of JSON Data from one html page to other html page?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related