1

Can we temporarily store data on browser ? For an example , i have page A and page B

On page A(a.html) , i would want to temporarily store text "Helloworld" on button click

function a(){
  return "helloWorld"
}

function changePage(){
  a()
  window.location(b.html)
}

On page B(B.html), i would want then to capture "Helloworld" on page A and print it on page b.

console.log(a())

I read on postMessage but based on my understanding , this only works on 2 page thats loaded on a single page on cross-domain workaround.

Farid Arshad
  • 334
  • 2
  • 14

2 Answers2

4

You can use the browser’s local-storage capabilities: localStorage. It helps to store data on the browser as strings.

To store data:

localStorage.setItem('foo', 'helloWorld');

To get the saved data:

localStorage.getItem('foo');// return 'helloWorld'
Ahmad MOUSSA
  • 2,729
  • 19
  • 31
  • Thanks @ahmad , i have checked and it solve the issue but i was wondering , for best practice purposes, will this approach cause any cross-domain origin ? – Farid Arshad Nov 08 '21 at 10:55
  • 1
    I can not see any cause to have cross-domain problems since the localStorage works on the client's side (the browser) and the check of the cross-domain is done on the server's side. – Ahmad MOUSSA Nov 08 '21 at 10:58
  • 1
    cross-domain problems are related to whether the server will permit or not the actual request, which is not related to your case. – Ahmad MOUSSA Nov 08 '21 at 11:01
1

I think sessionStorage fits your purpose. But mind that the data is removed when the user closes the browser - if you don't want that, simply replace sessionStorage with localStorage. But as long as you don't need the data to be persistent across restarts you should rather use sessionStorage to not fill up the users disk:

a.html

window.addEventListener("load", function() { // this is executed when the site is loaded
  inputElement = document.getElementById("dataInput");
  inputElement.addEventListener("input", function() { // and this whenever the user changes the contents of dataInput
    window.sessionStorage.setItem("dataInput", inputElement.value());
  });
});
<input id="dataInput" type="text" placeholder="Enter your data">

b.html

window.addEventListener("load", function() {
  outputElement = document.getElementById("dataOutput");
  outputElement.setText(window.sessionStorage.getItem("dataInput"));
});
<p id="dataOutput">The data should appear here</p>
TheEagle
  • 5,808
  • 3
  • 11
  • 39
  • I also thought of session storage first, but this statement on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) made we wonder whether it would actually work (I haven't tested it): *"Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work."* I read that as that every tab gets its own session storage but maybe I'm misinterpreting this. – Felix Kling Nov 08 '21 at 14:38
  • @FelixKling oh, then maybe you'd rather transform the browser into an oven and [bake some cookies](https://www.w3schools.com/js/js_cookies.asp). – TheEagle Nov 08 '21 at 20:38