how to load data received from ajax in another page?

Question

I have following pages

1. Page1.html
2. Page2.html
3. JavaScript.js

My first page makes ajax call on button click and receives response successfully..

I want to load that data in another page (Page2.html)..

$.ajax(
  .....
  .....
  .....
  success: function(response){
    window.location.href="Page2.html";
    $("#content").append(data);     
  }
);

My div with id of content is on another page(Page2.html)... Note: All my script are in the js file..

How can I perform the above task?

Answer 1

Solution I: With Jquery,

You need to include Jquery plugin https://github.com/carhartl/jquery-cookie :

$.cookie("data", data);

Solution II: Using Localstorage. [Supported in all modern browsers]

var data = 123;
// Put the var into storage
localStorage.setItem('data', data);

// Retrieve the var from storage
var retrievedData = localStorage.getItem('data');

console.log(retrievedData);

Answer 2

You can use browser local storage which will persist your data on subsequent page visits with no expiration time. It has well support in browsers from IE-8 to all modern browsers so it will work without any hassle.

To store data in you need to access the storage object and set data like this on page1.html .

$.ajax({
    ...
    ...
    success: function (result) {
        localStorage.setItem('MyData', result);
    }
});

On page2.html , you can retrieve data from localStorage object using the same key ( MyData ) name we used to set data. You can choose any meaningful name for this.

var data = localStorage.getItem('MyData');
console.log("use data wherever you want...", data);