JavaScript Session storage variable on another page

Question

So I'm rather new to JavaScript and I would love some help getting this code to work. I've looked at multiple other posts talking about session storage as well as if/else statements and still can't seem to figure it out.

I have a page, lets call it page 1 and it has 3 links, "red" "green" and "blue".

When you click on any of these links its function sets a session storage variable 'colorVar' to the color chosen and then redirects to a page called page 2.

As page 2 loads, the window.onload action is used to start a function according to the variable set on page 1. In this case the function that starts on page 2 simply displays "Your color is ____!".

Heres the code:

<!-- [This is Page 1] -->

<a href="Page2.html" onclick="colorRed()">Set color to red</a>
<a href="Page2.html" onclick="colorBlue()">Set color to blue</a>
<a href="Page2.html" onclick="colorGreen()">Set color to green</a>

<script>

function colorRed() {
      sessionStorage.setItem("colorVar", "red"); 
}
function colorBlue() {
     sessionStorage.setItem("colorVar", "blue");
}
function colorGreen() {
     sessionStorage.setItem("colorVar", "green"); 
}
</script>

<!-- [This is Page 2] -->

<script>
window.onload = sessionStorage.colorVar + 'Write()';

function redWrite() {
    document.write("Your color is red!")
}

function blueWrite() {
    document.write("Your color is blue!")
}

function greenWrite() {
   document.write("Your color is green!")
}
</script>

Opening a page in a new tab or window will cause a new session to be initiated. See more at developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage — Maria Ines Parnisari
– Maria Ines Parnisari, Commented Jun 26, 2016 at 2:16
Hmm, wouldn't session storage still work if 'Page 2' was opened in the same tab as Page 1, or does this also cause a new session to be initiated? — Taylor
– Taylor, Commented Jun 26, 2016 at 2:22

guest271314 · Accepted Answer · 2016-06-26 02:33:10Z

2

You can pass sessionStorage as as query string at href of <a> element; use location.search at window.onload event at Page2.html

Page1.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <a href="Page2.html" data-color="red" onclick="color(this)">Set color to red</a>
  <a href="Page2.html" data-color="blue" onclick="color(this)">Set color to blue</a>
  <a href="Page2.html" data-color="green" onclick="color(this)">Set color to green</a>

  <script>
    function color(elem) {
      event.preventDefault();
      sessionStorage.setItem("colorVar", elem.dataset.color);
      location.href = elem.href + "?colorVar=" + sessionStorage.getItem("colorVar");
    }
  </script>
</body>

</html>

at Page2.html

<script>
window.onload = function() {
  document.write("Your color is " + location.search.split("=").pop())
}
</script>

plnkr http://plnkr.co/edit/eNVXr4ElXRzrxlZ7EY0a?p=preview

edited Jun 26, 2016 at 2:33

answered Jun 26, 2016 at 2:22

guest271314

1

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

1 Comment

Jeremy Iglehart Over a year ago

This is by far the best answer to the problem. Good work!

Community · Accepted Answer · 2017-05-23 12:09:21Z

1

Edit: Clearly the answer above is much better than what i provided. I'll leave this here for future viewers - maybe the way I phrased things help someone sometime.

Taylor,

Two things.

sessionStorage() is unique to each page/tab. From the docs "Opening a page in a new tab or window will cause a new session to be initiated"
window.onload is expecting a function. You're just concatenating a string.

If you find a different way to pass information from one page to another (you could stuff it in the URL) your new color function should look something like this:

<script>
window.onload = writeColor(sessionStorage.colorVar);

function writeColor(color) {
  document.write("Your color is " + color + "!")
}
</script>

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Jun 26, 2016 at 2:24

Jeremy Iglehart

4,5676 gold badges28 silver badges39 bronze badges

Comments

user6506750 · Accepted Answer · 2016-06-26 02:27:35Z

0

You can't set window.onload to be a string; you have to point it directly to a function.

I would suggest creating a new function (call it writeColor) that contains if statements based on the value of sessionStorage.colorVar; then you can do window.onload=writeColor;

Alternately, change your window.onload line to window.onload = window[sessionStorage.colorVar + 'Write']; which will grab your function from the global scope and assign it to window.onload.

answered Jun 26, 2016 at 2:27

user6506750

964 bronze badges

Collectives™ on Stack Overflow

JavaScript Session storage variable on another page

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related