How to Implement Add Page to Favorites using cookies in Javascript

JavaScript
1

Hi Everyone,

I am a newbie and still learning the language. I need to implement an Add to Favorites feature , so that users are able to add a page to favorites list and can revisit it the next time they visit the website ( the link to the page is stored in a cookie , and is retrieved on their next visit )

I would really appreciate if someone would be so kind as to help me write the script for this feature.

Thanks in Advance ,

T.

2

Here are the common functions for handling cookies. createCookie, readCookie, and eraseCookie
http://snipplr.com/view/45954/

3

Thankyou for the snippets…I’ve tried to use these in my scenario but I am still confused…these functions allow us to store name/value pairs as cookies… In my scenario I have to store links to products bookmarked by the user…the link itself will be the value and perhaps the product name , the name? I hope I am right here…
Another question is in my scenario when the user clicks to save products as favorites we will create the cookie by calling the function createcookie on mouse click , but when the user revisits the site , all the cookies saved by the user should be retrieved when the page loads and displayed in the sidebar .The readcookie function apparently only reads cookies with known names , my Question is , Is there a way to read all cookies stored by the user ? If not, How should the names of products be remembered accross different sessions without using a db or file to store them?
Final question, if it cannot be done without a database or file, it would be more sensible to store the entire information the product name and the link to the product in the same database. Why to use different procedures to perform a single task?

4

Because you are creating the cookies, you know which ones can be used for the reading of them.

It could be as simple as using “favouritelink1” to store a link and “favouritename1” to store the name of that link, so that you can then use a loop to use different numbers to retrieve different values.

That’s a good idea. You could simplify things by just storing product id’s as a cookie instead, where the “favourites” cookie contains a series of id values, “2938,1837,823,283,3827” that you would then use to retrieve information about them from elsewhere.

5

Hi there, thanks for the post, it has really helped me a lot. I have been asked now to move forward by using $jquery .cookie plugin and serialize id values and store in a single cookie togather. And then deserialize the cookie after reading it …however as far as I have implemented the code the scenario is as follows …there is a page frame_products, used to load all products, the link add to fav is here, when the user presses the add to favorites button , a single id of the current product is obtained through $_GET variable. Which then has to be stored somwhere either an array or a cookie itself…if a single cookie is to be created , the values should be stored in an array. However the array if created in a file, cookie.js…this script is added to frame_products everytime the page loads , hence the array is recreated and all values lost. whatever be the case…either I declare it within frame_products or include it in an external script…the array will be recreated…and the values will be lost…my question is …Is there a work around to do this in some way…how can arrays be made global and static…if tried using workarounds like (typeof==='undefined) myfav= new Array(5);
Or window.myFav= new Array(5); but to no avail.

Second question , how to serialize id’s into a string and deserialize them after reading and store into a single cookie
Also if its possible to do so with multiple values like both id and link…I would like to know both solutions.

Finally Thanx again,
You hav been very helpful…

6

The way that I would do it is to read in the array contents from a cookie, and if any changes are needed to be made to the array then you should update the cookie with the new updated content of the array.

You can use JSON.stringify and JSON.parse

For example:


var faves = [
    {id: 'firstid', href: 'firsthref.html'},
    {id: 'secondid', href: 'secondhref.html'}
];

// access the fave objects with faves[0].id or faves[0].href
// add to the fave objects with faves.push({id: 'newid', href: 'newhref.html'})

// stringify the array/object so that you can store it in a cookie
var stringified = JSON.stringify(faves);
createCookie('faves', stringified);

// parse to convert the stringified content back to array/object data
faves = JSON.parse(readCookie('faves'));