Store a large amount of data (> 5MB) while navigating to different pages

Question

I currently need to store different information while going through different steps / pages of my website.Currently I use sessionStorag - here an example

sessionStorage.setItem("src", "" + $('#newImage').attr('src'));

The example is an image which should be up to 10 MB. sessionStorage is working fine until the limit exceeds...

Can you suggest an alternative? I would like to not send the data to a database and reload it everytime.

Answer 1

I dont really know what you are trying to do but if you want to you can try this as an example.

First Page.html:

localStorage.setItem("keypressed", "");
localStorage.setItem("keypressed", "<h3>First Page</h3>Your Answer: " + answer + "<br /> Correct Answer: R<hr>");
window.location.href="Second Page.html";
return true;

Second page.html:

var res = localStorage.getItem("keypressed");
res+= "<h3>Second Page</h3>Your Answer: " + answer + "<br /> Correct Answer: B<hr>";
localStorage.setItem("keypressed", res);
window.location.href="Third Page.html";
return true;

And with the rest of the pages just write the same code as you did with the second page.

And if you're going to send the information or something to another page just write this code into the result page or something.

Result page.html

var result = localStorage.getItem("keypressed");
document.getElementById("result").innerHTML = result;

And then create a div in the result page, like this:

<div id="result"></div>

This was probably not what you expected but this is how you can send data and reciew it, I hope it works out for you !!