jQuery: cookie

more at: http://www.benplum.com/projects/macaroon/ helpers: https://github.com/tomgrohl/jQuery-plugins/tree/master/jcookie

by lawrence pond

HTML

<h3>Set cookie</h3>
<code>$.cookie('key', '</code><input type="text"><code>');</code>
<hr>

<h3>Get cookie <small>Reload the page after typing</small></h3>
<code>$.cookie('key'); <span class="get"></span></code>
<hr>

<h3>Delete cookie</h3>
<button>Delete</button>

CSS

small {font-size:12px; font-weight: 400}
	body {
    background-color: #eef;
}

 .errorMessage
    {
        padding-left: 3px;
        padding-right: 3px;
        border: 1px solid #cc0000;
        padding: 8px;
        background-color: #fefeee;
        color: #cc0000;
        font-weight: bold;
        margin-bottom: 15px;
    }

   .successMessage
    {
        padding-left: 3px;
        padding-right: 3px;
        border: 1px solid #000000;
        padding: 8px;
        background-color: #fefeee;
        color: green;
        font-weight: bold;
        margin-bottom: 15px;
    }

#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
/* Note that jQuery UI CSS is loaded from Google's CDN in the "Add Resources" pane to the left.  Normally this would be done in your <head> */

JavaScript

(function ($, document) {

    // Default Options
    var options = {
        domain: null,
        expires: 7,
        path: "/"
    };

    // Create or update a cooke
    function _set(key, value, options) {
        var date = new Date();
        date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
        var path = "; path=" + options.path;
        var domain = (options.domain !== null) ? "; domain=" + options.domain : "";
        document.cookie = key + "=" + value + expires + domain + path;
    }

    // Read a cookie
    function _get(key) {
        var keyString = key + "=";
        var cookieArray = document.cookie.split(';');
        for (var i = 0; i < cookieArray.length; i++) {
            var cookie = cookieArray[i];
            while (cookie.charAt(0) === ' ') {
                cookie = cookie.substring(1, cookie.length);
            }
            if (cookie.indexOf(keyString) === 0) return cookie.substring(keyString.length, cookie.length);
        }
        return null;
    }

    // Erase a cookie
    function _delete(key) {
        _set(key, "", $.extend({}, options, {
            expires: -1
        }));
    }

    // Define Plugin
    $.cookie = function (key, value, opts) {
        // Set defaults
        if (typeof key === "object") {
            options = $.extend(options, key);
            return null;
        } else {
            // Override defaults
            opts = $.extend(options, opts);
        }

        // Delegate intent
        if (typeof key !== "undefined") {
            if (typeof value !== "undefined") {
                if (value === null) {
                    _delete(key);
                } else {
                    _set(key, value, opts);
                }
            } else {
                return _get(key);
            }
        }
    };
}(jQuery, document));

$('input').keyup(function(){
    $.cookie('key',...