Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by michellecampbell3
michellecampbell3
1,720 Points

Local Storage - carrying over to another page

Hey guys

I'm new to JavaScript so apologies if I do not explain this too well.

Basically I have created 3 buttons that when each are clicked they change the font size;

<h3> What Does Font Size 12 Look Like?</h3> <p id = "fontSize12"> some text...</p> <button type="button" onclick="document.getElementById ('fontSize12').style.fontSize ='12px'"> Click here to see </button>

Each button I have given their own id.

I would like the chosen button to carry over to another page (about.html) using Local Storage, however I do not know how to assign the value in pixels? if(window.localStorage) { localStorage.getItem("fontSize12"); }

function fontSize()

{ "use strict"; if (!localStorage.fontSize){ localStorage.fontSize = localStorage.getItem(); } document.getElementById("output").innerHTML = 'The font size has carried over pages, and is :' + fontSize;

}

var fontSize = localStorage.getItem("fontSize");

I think I might be over complicating this, if anyone could help that would be amazing!

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

It looks like you might be using the wrong function and syntax for setting the value. If the first example is intended to store the value "12px" in the local storage it should look more like this:

 if(window.localStorage) { localStorage.setItem("fontSize", "12px"); }

And you don't want to give a function and variable the same name. And the function itself should perhaps be a bit more like this:

var fontSize = "not set";
function setFontSize() {
  if (window.localStorage && localStorage.fontSize) {
    fontSize = localStorage.getItem("fontSize");
    document.getElementById("output").textContent =
      "The font size has carried over pages, and is: " + fontSize;
  }
}
michellecampbell3
michellecampbell3
1,720 Points

Hey Steven thanks for taking the time to look at this.

I've changed the code over to the above, however the only value that is being stored in local storage is; key "fontSize" and value "48px" is this because it is the last value given in the JS list?

I would like that when the user selects one of the buttons and goes to the new page, the "output" is displayed in that font size e.g. selects 12px, clicks page 2, the page has that font size of 12px.

<div id = "fontSize">
        <h4>text</h4>
          <h4>Click the buttons to the right and "see" if this helps you?</h4>

          <button class="button" type="button" onclick="document.getElementById ('fontSize').style.fontSize ='36px'"> Font Size 36 </button>
          <button class="button" type="button" onclick="document.getElementById ('fontSize').style.fontSize ='22px'"> Font Size 22 </button>
          <button class="button" type="button" onclick="document.getElementById ('fontSize').style.fontSize ='12px'"> Font Size 12 </button>

        <h3> text</h3

          <p>text</p>
          <p>text</p>
      </div>

if(window.localStorage) {
    localStorage.setItem("fontSize", "12px")
    localStorage.setItem("fontSize", "22px")
    localStorage.setItem("fontSize", "48px");
}


var fontSize = "not set";
function setFontSize()
{
    if (window.localStorage && localStorage.fontSize)
        {
            fontSize = localStorage.getItem("fontSize");
    document.getElementById("output").textContent = "The font size has carried over pages, and is :" + fontSize;    
        }
}

this is the about.html page for the output

<h3>Did The Value Pass?</h3>
        <!-- JS local storage should output in this div-->
          <div id="output"></div>
Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

From your description, it sounds like what you really want is to store the size set by the button, and then use it on the next page automatically. So you probably need a function for the buttons and you don't need one to set the font on page load:

firstpage.html 
  <button class="button" type="button" onclick="setSize('36px')"> Font Size 36 </button>
  <button class="button" type="button" onclick="setSize('22px')"> Font Size 22 </button>
  <button class="button" type="button" onclick="setSize('12px')"> Font Size 12 </button>

And assuming both pages share the same script file:

script.js 
// set font size AND store in local storage
function setSize(size) {
  document.getElementById("fontSize").style.fontSize = size;
  if (window.localStorage) {
    localStorage.setItem("fontSize", size);
  }
}

var fontSize = "not set";
// if there is a stored font size, display the message AND set the size
if (window.localStorage && localStorage.fontSize) {
  fontSize = localStorage.getItem("fontSize");
  document.getElementById("output").textContent =
    "The font size has carried over pages, and is: " + fontSize;
  document.getElementById("output").style.fontSize = fontSize;
}

For better analysis of multi-file issues like this it's probably best to make a snapshot of your workspace and post the link to it here.