Toggle state Cookie set successfully, but what about behaviour when no cookie exists?

Question

I have successfully coded the following behaviour:

Three divs are hidden/shown with .toggle();
When the user uses the .toggle(); it also sets a cookie remembering the toggle state

Here is the jQuery of the code above, which works, with comments:

    <script>
    $(document).ready(function () {

    // If user clicks the toggle it hides/shows the divs

    $(" .togglediv ").click(function () {
        var closed = $(" .siemaholder, .c_l_off, .c_r_off ").is(":hidden");
        if (closed)
            $(" .siemaholder, .c_l_off, .c_r_off ").show();
        else
            $(" .siemaholder, .c_l_off, .c_r_off ").hide();

    // If user uses the toggle it sets a cookie to remember the toggle state

        setCookie("open", closed, 365);
    });

    var openToggle = getCookie("open");

    if (openToggle=="true") {        
        $(" .siemaholder, .c_l_off, .c_r_off ").show();
    }
    else {        
        $(" .siemaholder, .c_l_off, .c_r_off ").hide();
    }

});

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}
</script>

The problem I have is that when no cookie exists yet (when the user visits the page for the first time and has not generated any cookies yet), the divs are hidden by default. I don't want this - I want them to be shown by default.

My intention is to show them by default, until a cookie is set by using the .toggle(); that I mentioned earlier. So that when the user first visits the page the content is showing and can then be 'hidden' by the user manually (which is remembered from there on).

Could anyone help me out?

So far I have tried using $(" .siemaholder, .c_l_off, .c_r_off ").show(); at the beginning of the script, so that by default the divs will be shown until cookies get involved. This didn't work.

Lord Elrond · Accepted Answer · 2019-02-03T21:47:52.700

0

1)

There are server-side cookies that are used to authorize a user. These cookies should never be set in client-side scripts as they will lead to security concerns (what described in my original answer).

2)

Client-side cookies are fine to use for default user settings (like your case) if they are not used to authorize a user.

What you should do in your case is have jquery set a cookie in $(document).ready( with something like this:

$(document).ready(function () {
if (!$.cookie('open') || !$.cookie('closed')) {
    $.cookie('open', 1, {expires: 10});
}
$(" .togglediv ").click(function () {
    var closed = $(" .siemaholder, .c_l_off, .c_r_off ").is(":hidden");
    if (closed)
        $(" .siemaholder, .c_l_off, .c_r_off ").show();
        $.removeCookie('closed');
        $.cookie('open', 1, {expires: 10});
    else
        $(" .siemaholder, .c_l_off, .c_r_off ").hide();
        $.removeCookie('open');
        $.cookie('closed', 1, {expires: 10});

You can find out more about these topics by looking at server-side vs. client-side cookies and jquery cookies

edited Feb 03 '19 at 21:47

answered Feb 03 '19 at 18:22

Lord Elrond

9,016
3
20
50

Hey Jane - I’m not using node.js so I wouldn’t be able to implement as suggested. Could you expand bit on the compromising of users with this code? I didn’t know this would introduce security issues. – Teebling Feb 03 '19 at 18:54
Cookies are encrypted pieces of code that contain info about a user (eg. username). If I were a hacker and knew how you encrypted your cookie, I could create a cookie with anyone's username and access any part of the site. Everything inside of a ` – Lord Elrond Feb 03 '19 at 19:13
Also, what backend language are you using? – Lord Elrond Feb 03 '19 at 19:14
I’m just using jQuery and Vanilla and the site is a phpBB forum. Any suggestions on more secure ways I can set cookies then? I sorted my original problem out by the way, by using :visible instead of :hidden. – Teebling Feb 03 '19 at 20:50
Sorry my answer was misleading and slightly incorrect. I edited it. If you **aren't** using the client-side cookies for authorization (which is what I assumed) then you should be fine. – Lord Elrond Feb 03 '19 at 21:48
ok understood. since these cookies im using are sent over SSL, arent used to authorise anyone (only stores toggle state), and are restricted to my site, I should be fine right? – Teebling Feb 05 '19 at 06:31

Toggle state Cookie set successfully, but what about behaviour when no cookie exists?

1 Answers1

1)

2)