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

Question

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;

Answer 1 · 2017-05-16T17:12:06Z

May 16, 2017 5:12pm

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

}

Welcome to the Treehouse Community

Looking to learn something new?

Pieter Bracke

Pieter Bracke

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

1 Answer

Alexander La Bianca

Alexander La Bianca