Adds JAAulde/cookies to the jQuery namespace, and provides jQ extension methods to bind cookies to form values and html elements.

bower install jaaulde-jquery-cookies

npm install jaaulde-jquery-cookies

Download the code (requires JAAulde/cookies), link it in your HTML file.

<script src="/path/to/jaaulde-cookies.js"></script>
<script src="/path/to/jaaulde-cookies.jquery.js"></script>

The entire cookies singleton API from JAAulde/cookies is aliased in the jQuery namespace. For example, cookies.set() is available as $.cookies.set(). For a list of all available cookie methods and their docs, see JAAulde/cookies documentation.

Write an element's contents to a cookie. Options which can be specified are the JAAulde/cookies cookie options.

/**
 * $('selector').cookify - set the value of an input field, or the innerHTML of an element, to a cookie by the name or id of the field or element
 *                           (field or element MUST have name or id attribute)
 *
 * @access public
 * @param options OBJECT - list of cookie options to specify
 * @see https://github.com/JAAulde/cookies#cookie-options
 * @return jQuery
 */
cookify: function (options) {

$('#username').cookify();

This code, given an input such as:

<input type="text" id="username" name="username" value="" />

will read the value from the input and write it to a cookie by the name of username.

If, instead of an input, the selector is for an element such as:

<div id="username"></div>

the element's innerHTML will be written to the cookie.

Fill an element with the value of a cookie by the same name

/**
 * $('selector').cookieFill - set the value of an input field or the innerHTML of an element from a cookie by the name or id of the field or element
 *
 * @access public
 * @return jQuery
 */
cookieFill: function () {

$('#username').cookieFill();

This code, given an input such as:

<input type="text" id="username" name="username" value="" />

will read the value of a cookie by the name of username and write it to the input's value.

If, instead of an input, the selector is for an element such as:

<div id="username"></div>

the cookie's value will be written to the element's innerHTML.

Fill an input using $.fn.cookieFill, then bind its change event to update a cookie via $.fn.cookify. Options which can be specified are the JAAulde/cookies cookie options.

/**
 * $('selector').cookieBind - call cookieFill() on matching input elements, and bind their change events to cookify()
 *
 * @access public
 * @param options OBJECT - list of cookie options to specify
 * @see https://github.com/JAAulde/cookies#cookie-options
 * @return jQuery
 */
cookieBind: function (options) {

$('#username').cookieBind();

The plugins use name and id attributes (listed in order of precedence, respectively) from the matched elements as the name of the cookie on which to operate.

So, given an element with a different name than id such as:

<input type="text" id="foo" name="bar" value="" />

The plugins will try to find and use a cookie named bar. If that cookie does not exist, a cookie named foo will be sought. This is true no matter what selector was used to find the element--each element is looked at independently and its attributes are iterated in this order to find an applicable cookie.