JavaScript Session storage variable on another page

后端 未结 3 580
日久生厌
日久生厌 2020-12-02 01:42

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

相关标签:
3条回答
  • 2020-12-02 01:59

    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.

    1. 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"

    2. 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>
    
    0 讨论(0)
  • 2020-12-02 02:01

    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.

    0 讨论(0)
  • 2020-12-02 02:02

    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

    0 讨论(0)
提交回复
热议问题