Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Pieter Bracke
Pieter Bracke
4,078 Points

localStorage.clear() doesn't seem to work.

Hi,

I am having an issue when using localStorage (the renewed version of cookies...). I have managed to set my pages to remember what preference a user has chosen (in this case a simpe example of language). But my function which is supposed to clear these saved preferences and rerout them back to page where the language can be chosen does not seem to work. Code included below, the problem lies with the function destroy cookie at the bottom of the page. And extra info there is a button on the pages with id of #vernietigcookie so the reference to that is working because I managed to console.log('some text'); it and that worked just fine.

Help would be appreciated. Kind regards Pieter

function MainFunction(){
    if(document.getElementById('nederlands')){
    var eNederlands = document.getElementById('nederlands');
        eNederlands.addEventListener('click', cookieNederlands);
    var navNederlands = location.href = 'nederlands.html';
    }

    if(document.getElementById('francais')){
    var eFrans = document.getElementById('francais');
        eFrans.addEventListener('click', cookieFrans);
    var navFrans = location.href = 'francais.html';
    }   

    if(document.getElementById('english')){
    var eEngels = document.getElementById('english');
        eEngels.addEventListener('click', cookieEngels);
    var navEngels = location.href = 'english.html';
    }

    var eClearCookie = document.getElementById('vernietigcookie');
        eClearCookie.addEventListener('click', clearCookie);

}

cookieNederlands = function nlCookie(){
        localStorage.setItem(navNederlands);

}

cookieFrans = function frCookie(){
        localStorage.setItem(navFrans);
}

cookieEngels = function enCookie(){
        localStorage.setItem(navEngels);
}

clearCookie = function destroyCookie(){
    localStorage.clear();
    window.history.go(0);
    location.href = 'taalkeuze.html';
    console.log('vernietig cookie en link naar homepage');


}

function start(){

  MainFunction();  
}

window.onload = start;

1 Answer

Hi,

What is the issue you are experiencing? Just from looking at this JS and not any of your html, believe there are some scoping issues that may or may not cause the issue you are having.

Hear is what I mean: All of your setItem() function use navNederlands, navFrans etc as a parameter. I see what you are trying to do, but these variables only live in the scope of the MainFunction(); So when you actually call cookieNederlands() in your eventlistener it will not actually know about the navNederlands variabe.

There is an easy fix for that though: Look at the below small example to explain what I mean

function MainFunction() {
      var button = document.getElementById('myButton');
      button.addEventListener('click', fn);
      var language = "English";
}

function fn() {
     var smallLetters = language.toLowerCase();
     console.log(smallLetters);
}

MainFunction();
//THIS WILL THROW AN UNCAUGHT REFERENCE ERROR BECAUSE language IS NOT DEFINED
//AN EASY FIX FOR THAT WOULD BE 
//------------------------------------------------

function MainFunction() {
     var button = document.getElementById('myButton');
     var language = "English";
     button.addEventListener('click', fn(language));
}

function fn(lang) {
     var smallLetters = lang.toLowerCase();
     console.log(smallLetters);
}

MainFunction();
//NOW THIS WILL PRINT OUT english TO THE CONSOLE. 

All you really need to do to fix your scoping issue is pass a reference of the navNederlands etc into the cookieNederlands() function

function MainFunction(){
    if(document.getElementById('nederlands')){
       var eNederlands = document.getElementById('nederlands');
          var navNederlands = 'nederlands.html';
           eNederlands.addEventListener('click', cookieNederlands(navNederlands));

}

//and then in your function for it below go

function cookieNederlands(navNederlands) {
        localStorage.setItem(navNederlands);

}