Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Bob Passaro
Bob Passaro
8,438 Points
Posted by Bob Passaro
Bob Passaro
8,438 Points

Want site to "remember" a user-interface preference: set a cookie?

So I'm playing around with a site for a soccer team's fan club, and they have two logos. I've set up a little css 3d thing where somebody can click on a little button to flip the logo over and show the other one, if they prefer that.

These elements are in the header file, so anytime the person then clicks to go to another page, the logo goes back to the default, even if they've chosen the other one. I'd like it to remember their preferred logo -- ideally not just for one particular session on the site but even if they leave the site and come back next week or something.

So this would mean setting a cookie? I don't need the code, exactly, just some help on what would be the best-practice way to do something like this. It occurs to me I could actually have the button be a form element and post a variable back to the page and then use that to set the cookie? Any time you set a cookie of a particular name, does it overwrite an older one that already exists?

But there are javascript cookies, too, right? I know less about those. Is that a better way to go?

5 Answers

Bob Passaro
Bob Passaro
8,438 Points
Bob Passaro
Bob Passaro
8,438 Points

Code looks like this (might be a little rough around the edges)

"Logo" is the default choice and "emblem" is the second choice. So the first piece checks to see what the preference is (if there is one at all).

The second part operates the toggle button and saves the preference. 

    /* LOGO PREFERENCE */
    var logo = localStorage.getItem("preferred_logo");
        if (logo == "emblem" && !$(".flipper").hasClass("show-emblem")) {
            $(".flipper").addClass("show-emblem")
        }

    /* LOGO FLIP */

        $( ".logo-toggle" ).on("click", function () {
            $(".flipper").toggleClass("show-emblem");
            if ($(".flipper").hasClass("show-emblem")) {
                localStorage.setItem("preferred_logo", "emblem")
            }  else {
                localStorage.setItem("preferred_logo", "logo")          
            }
        });
Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

This tutorial may set you on the right track. Not something I have looked into yet so can't be of further help. link

Alan Johnson
Alan Johnson
7,625 Points
Alan Johnson
Alan Johnson
7,625 Points

Hi Bob! Great question. Cookies are a good way to remember something in the browser, but unfortunately they almost always have a time limit. Even cookies that are set to expire far into the future have problems maintaining state across different devices (most people use more than one device to access sites these days, like their computer and their smartphone).

If you have logins on your site, I'd look to store any settings there. That'll help you ensure that users get the same experience any time they're logged in.

Bob Passaro
Bob Passaro
8,438 Points
Bob Passaro
Bob Passaro
8,438 Points

Thanks, guys. Good point about different devices. Not sure I want to add that layer of logging in, since there is not a lot of other reason to do that. Would be a small gain for adding that hassle for a user. Maybe it's more important just to get that preference to be persistent for the duration of the time on the site. Maybe a PHP "session" variable is the way to do that? http://www.php.net/manual/en/reserved.variables.session.php

Bob Passaro
Bob Passaro
8,438 Points
Bob Passaro
Bob Passaro
8,438 Points

Ah, I think this is what I was looking for: "Web Storage" ... probably the most appropriate for my purposes. Let's you store key=>value variables in the browser, for the session or forever (that is, until the user clears their browser cache).

http://www.sitepoint.com/an-overview-of-the-web-storage-api/ http://www.w3.org/TR/webstorage/

Stays in the browser and doesn't interact with the server at all as I understand it. PHP cookies might be a little overkill in this case. Yes, if somebody changes the logo on a computer, it won't know that preference if they go to the site on their phone (until they change the preference there, too), but I'm willing to live with that as opposed to having people log in.