Taylor Taylor - 1 year ago 134
HTML Question

JavaScript Session storage variable on another page

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>


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

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

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!")

Answer Source

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


<!DOCTYPE html>

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

  <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>

    function color(elem) {
      sessionStorage.setItem("colorVar", elem.dataset.color);
      location.href = elem.href + "?colorVar=" + sessionStorage.getItem("colorVar");


at Page2.html

window.onload = function() {
  document.write("Your color is " + location.search.split("=").pop())

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download