Beholde endringer når jeg reloader

[Tetto]

Hei.

Jeg skal lage en meny som bruker javascript til å endre farge på skrift og bakgrunn når jeg trykker på de forskjellige knappene. Det jeg ikke klarer å finne ut av er hvordan jeg lan beholde endringene når siden reloades.

Jeg bruker
document.getElementById('home').className = "home-clicked";
til å endre å endre klasse, og det jeg da lurer på er hvordan jeg kan beholde denne klassen helt til jeg selv velger å endre den igjen. (Som vil være når den besøkende klikker på et annet menyvalg.)

På forhånd takk!

 

[impel]

For å få til dette må du bruke cookies, og lagre fargen der.

Om cookies: https://developer.mozilla.org/en-US/docs/Web/API/document.cookie

Hvis du bruker jQuery, kan du laste ned jQuery.cookie: https://github.com/carhartl/jquery-cookie

Og gjøre noe sånt:

    $('#home').click(function(){
        $.cookie('minklasse', 'home-clicked', { expires: 7, path: '/' });
        $(this).addClass('home-clicked');
    });
    
    var kakefargeklasse = $.cookie('minklasse');
    if(kakefargeklasse) $('#home').addClass(kakefargeklasse);

Uten jQuery / denne pluginen trenger du en del mer kode, men du finner mer hjelp til det på MDN-lenken over.

Endret: Fungerende eksempel: Edit fiddle - JSFiddle

 

[Tetto]

Se der ja! Takk for hjelpen!