kk1957
kk1957

Reputation: 8844

store and retrieve a div in cookies using jquery

Ok, So I am creating a cookie using jquery and storing a div in it. This div has a lot of formatting,other divs,text ,etc in it.

var rentContainer = document.createElement('div');
rentContainer.setAttribute("class","module");
var carContainer = document.createElement('div');
carContainer.setAttribute("class","carRentContainer");
rentContainer.appendChild(carContainer);
.... and a lot of other things go in this rentContainer div

Now save it in cookie

$.cookie('rented_car', rentContainer);

everythings looks ok upto now.

when the page is refreshed and the body is loaded, it is now time to get this div and show it on page ( with same formatting,structure, etc).

so in my function I have

var rented_car_cookie = $.cookie("rented_car");
if(rented_car_cookie){
    document.getElementById('rentit').appendChild(rented_car_cookie);
    //rentit is already defined and exists on the page. All I need is to add the cookie div content on it.

but this gives me an error message

Firebug's log limit has been reached. 0 entries not shown. Preferences
uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLDivElement.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: iGo.js :: checkCookies :: line 10" data: no]

Please help. What is the best way to do this?

Upvotes: 1

Views: 3666

Answers (1)

Samich
Samich

Reputation: 30175

Anyway, storing full html element in cookie it bad thing. Maybe it's better use JSON.

Anyway you can try to save div as html string in the cookie.

// set
$.cookie("rented_car", $(rentContainer).html())

// get
var content = $.cookie("rented_car");
var $rentContainer = $('<div class="module">' + content + '</div>');

Code: http://jsfiddle.net/yecf8/

But you need to know that there are a lot of different limitations for different browsers regarding cookies. For example:

Microsoft Internet Explorer complies with the following RFC 2109 recommended minimum limitations:

  • at least 300 cookies
  • at least 4096 bytes per cookie (as measured by the size of the characters that comprise the cookie non-terminal in the syntax description of the Set-Cookie header)
  • at least 20 cookies per unique host or domain name

Upvotes: 4

Related Questions