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

Killeon Patterson
Killeon Patterson
18,527 Points
Posted by Killeon Patterson
Killeon Patterson
18,527 Points

localStorage set/get

On my 'About' page I have an input field that allows you to change the color of the .caption (title) element. I'm attempting to use localStorage to save the last entered color and make it available after refresh. The item saves to storage ok, although the value for the key is empty and I can't retrieve it. Is there something wrong with my functions? I've put the functions inside and outside of the eventListener with no success? Any ideas?

<!Doctype html>
<html>
  <body>
  <head>
  <meta charset="utf-8">
   <link rel='stylesheet' href='css/style.css'>
    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
  <title> Sat9 | Media</title>

    </head>
    <section class='wrap'>
  <header id="header">

    <div class='head-zero'>
      <img class='logo' src="img/Logo.PNG"/>
      </div>

    <div class='nav-main'>
    <ul>
      <li><a href='index.html'>home</a></li>
      </ul>
    </div>

  </header>

      <div class='leggo' >
      <img src='img/leggo.JPG'/>

        <f1 class='caption'> about</f1>
        <input class="input">

      </div>

      </section>

    <footer class='aboutfoot'>

  </footer>
    <script src='js/app1.js'></script>
     <script src='js/javascript.js'></script>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </body>

</html>

```JS
var input = document.querySelector('.input');
var leggo = document.querySelector('.leggo');
var caption = document.querySelector('.caption');

function save() {
    localStorage.setItem("test2", input.value);
};

function load() {
    caption.style.color = localStorage.getItem("test2");
};

leggo.addEventListener("click", () => {

    caption.style.color = input.value;
    save();
    input.value = ('');

});
load();

2 Answers

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Hi Killeon Patterson 

var input = document.querySelector('.input');
var leggo = document.querySelector('.leggo');
var caption = document.querySelector('.caption');

function save() {
    localStorage.setItem("test2", input.value);
};

function load() {
    caption.style.color = localStorage.getItem("test2");;
};

leggo.addEventListener("click", () => {

    caption.style.color = input.value;
    save();
    input.value = ('');

});
load();

Here's how I fixed your code. I included the save(); call in the event listener. All your application was doing was saving as soon as the page loaded.

I also remove the JSON.parse() since you're only storing a string value.

Hope this helps.

Regards, Andrew

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Killeon Patterson,

The value isn't been set to anything in your load function, to see it in the console for example you simple need to log it out.

function load() {
  console.log(JSON.parse(localStorage.getItem('test2')));
}

load();

Happy coding!

Killeon Patterson
Killeon Patterson
18,527 Points
Killeon Patterson
Killeon Patterson
18,527 Points

Hello Chris,

Thank you for getting back to me. I updated my redone code with your advice. I attempted to send the data to caption.style.color. It still does not appear to be working. I looked at the console and it saved the key name, but only represented the value with empty curly braces {}. Do you have any other thoughts?