jQuery serverCookieJar
Introduction
¶
After work on the jQuery plugin cookieJar it was pointed out that cookie data is sent with every request and that cookies have a limit of 4KB, this got me thinking. What about storing this information on the server.
This is done by making a request to the server when the page first loads with a request for the data. Then only any changes are sent to the server when something changes. This adds the size of this data for the page to the down traffic (much faster than the up traffic) occurring just once per page, rather than the up traffic for every request on a page.
Requirements
¶
Requirements to use this code
Compatibility
¶
So far the plugin has been tested in windows using the following browsers.
- IE 6, 7
- FF 1.5, 2, 3
- Opera 9
- Safari 3
Usage
¶
This plugin is designed as an alternative to cookieJar. See it’s doc’s and usage examples
Note:
This plugin uses async:false option on ajax. This means when a serverCookieJar object is created for the cookieJar it makes a request to the server for that cookieJar, the browser will pause until the cookieJar has been retrieved from the server, the larger the serverCookieJar or the slower the server the longer this will take.
Example
¶
jquery.servercookiejar.example.html
Downloads
¶
Here are the downloads
jquery.servercookiejar.js (7.2KB)
jquery.servercookiejar.pack.js (2.4KB)
jquery.servercookiejar.php (0.7KB)
jQuery cookieJar bug fix
Bug Fix
Found a little bug in the cookieJar script I recently released.
If you try to create a second cookieJar it over writes the previous cookieJar object.
The fix returns a new instance to a cookieJar as was intended
Sorry about the bug
Downloads
jquery.cookiejar.js (6.54 KB)
jquery.cookiejar.pack.js (2.06 KB)
jQuery cookieJar
Dan G. Switzer, II wrote here pointing out there are some important things to be taken into consideration while using cookies and this plugin.
1) Cookies are sent with each request header.
2) The total Cookie size per domain is generally 4K (which is per the spec http://www.ietf.org/rfc/rfc2109.txt.) This is not a per Cookie limit, but a total name-value pair.
Introduction
¶
I’m writing a tablesorter 2.0 plugin which I will release here shortly, along with tutorial. The plugin allows the sort order of the table to be stored in a cookie, which is then restored upon a table of the same id loading.
I had the need to store multiple values in a single cookie, it would be crazy to store each tables value in a separate cookie. So I started looking for a solution and couldn’t really find a easy one to use, and nothing for jQuery but cookie which can only store a single value in cookies. Ajaxian revealed that CookieJar: JSON Cookies by Lalit Patel existed a great idea of storing a JSON encoded object as the cookie value. It seems that this has already been implemented into Mootools. I suddenly felt the need to create a jQuery plugin.
Requirements
¶
- jQuery - Core that the plugin runs with
- JSON (download) - Used to encode the object into JSON
- cookie (download) - Used to store the JSON encoded object
Compatibility
¶
So far the plugin has been tested in windows using the following browsers.
- IE 6, 7
- FF 1.5, 2, 3
- Opera 9
- Safari 3
Usage
¶
Javascript - Simple set, get
1 2 3 | var myCookieJar = $.cookieJar('myCookieJar'); myCookieJar.set('test1', 'hello world'); alert(myCookieJar.get('test1')); |
Javascript - Chained set, get
1 2 | $.cookieJar('myCookieJar').set('test1', 'hello world'); alert($.cookieJar('myCookieJar').get('test1')); |
Javascript - Larger Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | jQuery(function($) { // load the cookieJar into an object var accessCookie = $.cookieJar('accessInfo'); // get the name from the cookieJar var name = accessCookie.get('name'); // check that the name is defined if (typeof name == 'undefined') { // name was undefined, prompt for a name var name = prompt('Your name please'); // store the name in the cookieJar accessCookie.set('name', name); } // show the name from the cookieJar on in tag with // id access-name $('#access-name').text(accessCookie.get('name')); // get the accessLog from the cookieJar var accessLog = accessCookie.get('accessLog'); // check the that accessLog is an Array object if (typeof accessLog != 'object' || accessLog.constructor != Array) { // accessLog wasn't an Array object, set it as an Arrray object var accessLog = []; } // add the current date as a string to the begining // of the accessLog Array accessLog.unshift(new Date().toString()); // store the accessLog Array in the cookieJar accessCookie.set('accessLog', accessLog); // loop though all the elements in the Array object accessLog $.each(accessLog, function(index, value) { // append the value to the unordered list $('#access-log ul').append(' <li>'+value+'</li> '); }); // show the cookieJar JSON encoded string $('#cookie-contents').text(accessCookie.toString()); }); |
Documentation
¶
You’ll find most of the code documented.
But here is an outline of the methods.
- cookieJar.construct(name, [object options) object
- Not usually directly called, just use "var myCookieJar = jQuery.cookieJar('name', myOptions)"
- options object
-
- bool debug
- To show debug logging, default false
- bool cacheCookie
- To not reload the cookie on each get, default true.
- string cookiePrefix
- Stops the name of cookieJars clashing with any other cookies, default 'jqCookieJar_'
- object cookie
- Any options that you want to pass to the cookie plugin, default { path: '/', expires: 365 }
- cookieJar.set(string name, value) bool
- Sets a value in the cookie jar using a name to identify it
- cookieJar.get(string name) mixed
- Gets a value from the cookie jar using a name to identify it
- cookieJar.remove([string name]) bool
- Removes a value from the cookie jar using a name to identify it
No name will clear the cookie jar of all values - cookieJar.setFromObject(object object) bool
- Uses the object as the set of values to store in the cookie jar
- cookieJar.toObject() object
- Returns the contents of the cookie jar as an object
- cookieJar.toString() string
- Returns the contents of the cookie jar as a JSON encoded string
- cookieJar.destroy() bool
- Removes the cookie containing the cookie jar from the server
Note:
The cookieJar is loaded and cached upon construct. Once the cookie jar is loaded it doesn’t reread the cookie again. This can be disabled via the options see cacheCookie.
Downloads
¶
jquery.cookiejar.example.html
jquery.cookiejar.js (6.54 KB)
jquery.cookiejar.pack.js (2.06 KB)