Jump to content
Larry Ullman's Book Forums

Setcookie - Pages 366-367

Recommended Posts

I had some trouble with the steps on pages 366-367 when setting cookies. What was happening ( I think ) is that the following code (step 7 & 8) was looking for the id of the target:


var target = e.target || e.srcElement;


//The timer code here didn't effect my results, but was sitting between the problematic code

var expire = new Date();

expire.setDate(expire.getDate() + 7);


COOKIE.setCookie('theme', target.id, expire);



However if a cookie was already set, and you use getCookie('theme') to retrieve it, your value is a string. So the fix I came up with was to use and IF and ELSE:


var expire = new Date();


expire.setDate(expire.getDate() + 7);


if (typeof e == ‘string’) {

COOKIE.setCookie(‘theme’, e, expire);


} else {

var target = e.target || e.srcElement;

COOKIE.setCookie(‘theme’, target.id, expire);




This got my page to work, meaning that I could switch between the Themes, close my browser, and then see the last Theme used. Otherwise, you could still alternate between the two Themes when the the window was open, but it would not be retrieved properly.


I wanted to know if there was a better way to work around this? Using (typeof e == 'string') worked out in this scenario, but as a rookie I'm not 100% confident in this fix.


Also, since nobody else has brought this up, I wanted to make sure I didn't miss or screw up somewhere along the way. Sometimes obvious mistakes are preventing my code from working in the first place.



Link to comment
Share on other sites

I'm using the code from theme.html, theme.js and cookies.js. When you select a theme and then close the browser, you are expecting that the 'theme' will be stored and then loaded from a Cookie. Upon reopening the page, the cookie is retrieved in the onload function of the theme.js file.



window.onload = function() {

'use strict';


// Add click event handlers to each theme link:

document.getElementById('aTheme').onclick = setThemeCookie;

document.getElementById('bTheme').onclick = setThemeCookie;

// Get the cookie's value:

var theme = COOKIE.getCookie('theme');


The final line in the getCookie code provided in cookies.js is:

return cookies.split('=')[1];

This sends back a string. In this case either aTheme or bTheme.


The next lines in theme.js are:


// If there was a value, set the theme:

if (theme) {



}; // End of onload anonymous function.


I think this is happening: Theme is selected -> a cookie is stored -> the page is closed -> the page is opened again -> a cookie is retrieved (as a string). This string (bTheme or aTheme) is passed to setThemeCookie. The value passed to setThemeCookie(e) is checked by:


if (typeof e == 'undefined') e = window.event;


But because e is being passed along as a string, it is not undefined. Then you try to use e.target || e.srcElement on a string, which is where I thought maybe this is failing and why the background (theme) is not loading when I reopen the page.


That is why I modified the setThemeCookie to check for a string first (aTheme or bTheme), else use an event object, which would be every other time (when you are clicking on the links to change the theme).


If I DON'T modify the setThemeCookie function, like I show in my original post, then the background color is white upon reopening the page. I wanted to make sure that setCookie and getCookie were working properly, so I inserted a document.getElementById('whatever').innerHTML = theme to show me the theme variable prior to sending it through setThemeCookie. It does indeed show me either aTheme or bTheme as the value when I open the page, so I know that both setCookie and getCookie are working properly.


I hope that I'm not missing something super obvious here and that I'm understanding everything correctly. Thank you greatly for your help and your patience.

Link to comment
Share on other sites

Sorry for the confusion. It's a simple mistake on my part, and I can see why you were confused. On the window load, if a cookie exists, the setTheme() function should be called, not setThemeCookie(). That should make everything right for you. Please confirm and I'll get that added to the errata. Apologies again for the confusion!


Alternative, to have it call setThemeCookie(), and renew the cookie (as suggested in the comments in the book), you would have to either pass an object to the setThemeCookie() function or rewrite setThemeCookie() as you're trying to do.

Link to comment
Share on other sites

Yes, this did help. Replacing setThemeCookie with setTheme did solve the problem of loading the theme upon reopening the page.


However, like you said above, I still need to pass something along to the setThemeCookie to restart the cookie. I wasn't sure how proper my fix was when I changed setThemeCookie. As far as passing an object to setThemeCookie (leaving setThemeCookie the way it is), I'm not really sure what I could pass to it (besides the onclick from the link).



Link to comment
Share on other sites

I've decided to take this route and stick with it, that way I can leave the setThemeCookie function alone:


In the onload function I'm using:



if(theme) {


var expire = new Date();

expire.setDate(expire.getDate() + 7);

COOKIE.setCookie('theme', theme, expire);



I'm pretty sure I've completely exhausted this topic. Thanks again for all of your help Larry! I start the final chapter today :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...