One of the Javascript widgets: jcookie-Cookie enhancements based on jquery

The cookie plugin in jquery is too simplistic, just a simple encapsulation of cookies, and a lot of work is needed in practical applications. So always want to do an enhanced cookie plug-in, more convenient to use.

From a demand point of view, in E-commerce applications, the flexible application of cookies is very important to the user experience, you can remember the user's frequent repetitive operations, personal preferences, and so on. Unfortunately, many applications are not good at using cookies. Often input a lot of search query conditions, optional operation, and then back, refresh, login again after no, but also to re-enter, very annoyed. So I think can be intelligent to remember the user's common operation, is very considerate user, let the user moved things.

From a technical standpoint, a high-level JavaScript cookie API should be able to:

1. Save a complex JavaScript Object. This class instance can contain basic types, class member variables, and so on.

2. Save the State of a complex DOM node

For example, to save the state of various controls in a form, such as an input box, a drop-down selection box, a single check box

3. The layout and style of the interface, such as theme of user preference in portal, window size, position, number and so on.

4. User's frequent operation results, such as sorting and so on.

I wrote an enhanced jquery based cookie plugin Jcookie (click here to view and download demo>>), temporarily addressing the problem in practical applications primarily.

How to use:

< SCRIPT　src ="js/jquery.js" temp_src ="js/jquery.js" type =text/javascript ></ SCRIPT >
< SCRIPT　src ="js/jquery.ui.all.js" temp_src ="js/jquery.ui.all.js" type =text/javascript ></ SCRIPT >
< SCRIPT　src ="js/jquery.cookie.js" temp_src ="js/jquery.cookie.js" type =text/javascript ></ SCRIPT >

1. Save and restore a complex JavaScript class instance.

var obj = new Object(); //你可以任意构造一个复杂成员变量的类实例。
var key = 'form_id';
$.cookie(key, obj);//保存一个实例
var obj = $.cookie(key); //恢复一个实例


2. Save and restore the value of a field in a form to a cookie

3. Save and restore the order of a sortable list into a cookie

$('#list3').cookie();
//
将list的各个item的顺序保存到cookie中
$('#list3').decookie();
//
从cookie中恢复一个list的各个item的顺序

The HTML code for the sortable List is as follows:

$('document').ready( function ()　{
　　 //　here, we allow the user to sort the items
　　$('#list3').sortable( {
　　axis: 'y',
　　cursor: 'move',
　　update:　function ()　{ $('#list3').cookie(); }
　　} );
　　 //　here, we reload the saved order
　　 $('#list3').decookie();
　　} );