Save variable as cookie in Javascript?

Question

I have a function that displays or hides a menu, but if I refresh the variable is reset to 0. What I want is to keep the variable value it's currently at in between page refreshes, which I guess you do with cookies? However I don't know how.

visible = 0; // Want this variable to keep it's value

function menu(id)
{
    if(visible == 0) {
        document.getElementById(id).style.display = "block";
        visible = 1;
    }
    else {
    document.getElementById(id).style.display = "none";
    visible = 0;
    }
}

score 2 · Accepted Answer · edited May 23 '17 at 11:57

Managing cookies in JavaScript is ugly unless you use a framework. The benefit of using a cookie is that you don't have to worry about compatibility with old browsers. However, if you don't care about old browsers then you can use HTML5 Local Storage (aka Web Storage), which allows you to persist basic key/value pairs of strings.

HTML5 Local Storage (Web Storage) example

Demo: http://jsfiddle.net/9zsH4/

In the demo, try toggling the menu then refresh the page to see its state be persisted.

function getVisible(){
    var value = localStorage.getItem('visible');
    return value == '1';
}

function setVisible(visible){
    localStorage.setItem('visible', (visible ? '1' : '0'));
}

function menu(id)
{
    if(!getVisible()) {
        document.getElementById(id).style.display = "block";
        setVisible(true);
    } else {
        document.getElementById(id).style.display = "none";
        setVisible(false);
    }
}

Web Storage documentation on w3.org

Cookie Example

This example uses the minimal framework from MDN here, so be sure to include the docCookies framework.

function getVisible(){
    var value = docCookies.getItem('visible');
    return value == '1';
}

function setVisible(visible){
    docCookies.setItem('visible', (visible ? '1' : '0'), new Date(2015, 5, 12));
}

function menu(id)
{
    if(!getVisible()) {
        document.getElementById(id).style.display = "block";
        setVisible(true);
    } else {
        document.getElementById(id).style.display = "none";
        setVisible(false);
    }
}

Edit: to explain this line:

localStorage.setItem('visible', (visible ? '1' : '0'));

Here I'm using the ternary operator. It's just a shorthand if/else, so it's the same as doing:

if(visible){
    localStorage.setItem('visible', '1');
} else {
    localStorage.setItem('visible', '0');
}

Another example: get a human Yes/No representation of a boolean.

var something = true;
var humanText = something ? 'Yes' : 'No';
console.log(humanText); // Yes

var something = false;
var humanText = something ? 'Yes' : 'No';
console.log(humanText); // No

As you can see, the first part is evaluated and if the result equates to true, the question mark part is used, else the colon part is used.

See this question for more examples.

If you have the time to explain exactly what this line does I'd appreciate that - e.g I dont know what the question mark does. localStorage.setItem('visible', (visible ? '1' : '0')); — Hummelmannen, Apr 04 '14 at 15:59
@Hummelmannen I've updated the answer with an explanation. Hope that helps. — MrCode, Apr 04 '14 at 16:11

score 0 · Answer 2 · answered Apr 04 '14 at 14:43

0

Cookies are not appropriate for this, as they will be sent to the server with every request.

Instead, use storage. Keep your current code and replace visible with localStorage.visible. This will allow the variable to persist across pageloads.

Additionally, you will need to add if( localStorage.visible) document.getElementById('yourID').style.display = 'block'; independently of the menu function, so that when the page is loaded then the initial state is applied.

answered Apr 04 '14 at 14:43

Niet the Dark Absol

320,036
81
464
592

I can't make it work, is this how you meant? I'll edit the initial post showing what I changed. – Hummelmannen Apr 04 '14 at 14:51
Ah, not quite. Remove the initial `localStorage.visible`, because that's resetting it to zero each time. – Niet the Dark Absol Apr 04 '14 at 14:52
However if I doesn't have an initial value, how will it know what to do? – Hummelmannen Apr 04 '14 at 14:54
It defaults to undefined, which is "equal" to zero. – Niet the Dark Absol Apr 04 '14 at 14:55
Hm, the menu still doesn't stay between page refresh – Hummelmannen Apr 04 '14 at 14:57
Did you do the part where you have to check the variable and show the menu if it's set to be visible? – Niet the Dark Absol Apr 04 '14 at 14:59
I am not quite sure where and how to add that, I'm terrible at javascript – Hummelmannen Apr 04 '14 at 15:02
Is it possible for me to send you a compressed folder where you can have a look at my documents? Or if I can upload it in some online textfield – Hummelmannen Apr 04 '14 at 15:11

Save variable as cookie in Javascript?

2 Answers2

HTML5 Local Storage (Web Storage) example

Cookie Example