7 replies to this topic

[Deretto]

I'm helping my friend make a website for his webcomic. Currently, the pages of his comic are set to change by buttons that pro/regress through an array. What he's asking me to do is make a cookie so that it remembers the last page the person viewed. That way when the visitor returns they'll be viewing the last page they saw.

Here is an example of the javascript used for the website.

var images = ["images/001.jpg", "images/002.jpg"];

var story = new Array();

story[0] = "blah";
story[1] = "more blah";

var index = 0;

function nextImage()
{
	++index;
	if (index < images.length)
	{
		document.getElementById('my_image_container').setAttribute('src', images[index]);
		document.getElementById('my_text_container').innerHTML = story[index];
	}
	else
	{
		index = (images.length - 1);
		nextImage();
	}
}

Similar functions exist for Previous, First, and Last
Please teach me how to use cookies properly. >.<;

[truefusion]

It'd be easier if i just redirect you here and tell you in your case you don't have to store the path of the page the visitor is on, because according to the JavaScript you have provided the user isn't leaving the page when they change images. Instead, what you'd want to store is the array index of the image that the user last saw. You would have to update the next image and previous image functions to deal with cookies in order for this to work properly. You would also have to create a function that gets loaded on page load that checks for the cookie and adjusts the array index accordingly. There is no need to save the default index in a cookie if it is the user's first time visiting the page.

If, however, you have multiple pages with the very JavaScript you have provided, then you'd want to set the path of the cookie to the current page the user is on. In this way, at least in theory, the cookie that the browser loads that would be accessible to your code would be the one created for that page alone.

[Deretto]

Well, I tried it out and sadly I didn't get too far. After adding all the cookie code my functions will no longer execute. I can't really see any syntax errors or anything like that. Here's what I did.

fuction checkCookie()
{
	if (readCookie('page'))
	{
		index = readCookie('page');
		document.getElementById('my_image_container').setAttribute('src', images[index]);
		document.getElementById('my_text_container').innerHTML = story[index];
	}
	else
	{
		createCookie('page',index,365);
	}
}

window.onload=checkCookie;

function createCookie(name,value,days) 
{
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function nextImage()
{
	++index;
	if (index < images.length)
	{
		document.getElementById('my_image_container').setAttribute('src', images[index]);
		document.getElementById('my_text_container').innerHTML = story[index];
		createCookie('page',index,365);
	}
	else
	{
		index = (images.length - 1);
		nextImage();
	}
}

[truefusion]

Without a page to look at it'll be a bit difficult to help you debug your code. It is possible that document.cookie does not contain any information; it is possible that readCookie() is returning null; or it is something else that it causing things not to work as expected. Firefox has a nice debugger that helps you debug JavaScript errors. When you click on the link that is supposed to execute the nextImage() function, what does Firefox report in its error console?

[Baniboy]

I don't know if I'm of any help at all, but I noticed that you have "fuction checkCookie()" in the first line instead of "function checkCookie()".

If this was a dumb and useless reply...

[Deretto]

Well that was a dumb typo *head desks*

Ok so my navigating buttons/functions are working again. Course now the cookie doesn't seem to be working as planned.
I was originally hoping that in the case of:

if (readCookie('page'))

That it'd return null when the page is visited for the first time. Course I was thinking that null is the same as FALSE. Just to make sure though I changed the if statement to:

if (readCookie('page')!=NULL)

That didn't seem to help either. Quick question, I'm currently just running the html off my hard disk. Does the web page have to actually be online in order for the cookie to be made?

[truefusion]

Deretto, on 04 December 2010 - 04:05 PM, said:

Quick question, I'm currently just running the html off my hard disk. Does the web page have to actually be online in order for the cookie to be made?

What's the protocol being used when viewing the page? file:// or http://? I wouldn't expect the cookie to be set for file://

[Deretto]

truefusion, on 04 December 2010 - 05:35 PM, said:

What's the protocol being used when viewing the page? file:// or http://? I wouldn't expect the cookie to be set for file://

Ok, so I tried running it off my host and I'm still having problems. The cookie is being made and the value of the cookie is being stored properly but its not being read correctly on page load. I tried some more things though. On the cookie guide that was linked in the first reply, when readCookie was used there was no semicolon. It just says

var x = readCookie('ppkcookie1')

So I tried no semicolon and that didn't work. Seemed dumb to me but figured I'd give it a shot. I then tried changing the way index gets its integer.

//var index=0; original initiation.
var index;

function checkCookie()
{
	if (readCookie('page')!=NULL)
	{
		index = readCookie('page')
		document.getElementById('my_image_container').setAttribute('src', images[index]);
		document.getElementById('my_text_container').innerHTML = story[index];
	}
	else
	{
//added index=0 here
		index=0;
		createCookie('page',index,365);
	}
}
window.onload=checkCookie;

When I did that my next button would no longer work. So I can assume that something is going terribly wrong when reading the cookie.