How to use cookies in jQuery

Question

It is easy to use cookies on servers like PHP, .NET ... etc.

I would like to use cookies for a static website that is only HTML, CSS and jQuery.

Does anyone know how to implement cookies in jQuery?

Answer 1

You can use this plugin

Example: setting a cookie

$.cookie("example", "foo"); 

Answer 2

The jQuery Cookie plugin is one way:

https://github.com/carhartl/jquery-cookie

You use it like this:

 $.cookie('cookie_name', 'value'); // to set $.cookie('cookie_name'); // to get 

Answer 3

You do not need the jQuery plugin, you can easily access cookies in JavaScript. Here's how: https://developer.mozilla.org/en/DOM/document.cookie

But perhaps plugins related to other answers will make it easier for you to access.

Answer 4

Are you sure cookie is exactly what you need? There is localStorage , which is much better in many scenarios.

You wrote that you want to use cookies with a static site, but cookies will be sent to the server and returned back. Do you really need you to send information to a server that hosts a static website? It increases the size of the HTTP header and reduces the performance of the website (see here ).

Cookies have very strict limits. Corresponds to section 6.3 of rfc2109 or 6.1 rfc6265: at least 4096 bytes per cookie, at least 50 cookies per domain (20 in rfc2109), at least 3,000 cookies in total (300 in rfc2109). Thus, cookies that cannot be used to store too much information. For example, if you save the state of each grid of each of your web pages, you can quickly reach the limits.

If you just want to save some user settings for the page, you can use localStorage , and using is very simple.

If you prefer to use some jQuery plugin instead of using localStorage , and if you need support for older web browsers (like IE6 / IE7), you can use jStorage . In case you have a smaller storage size: 128 KB instead of 5 MB (see here and IE userData Behavior ), but better than 4K, for which there are cookies (see here ).

I want you to just think a bit about cookie alternatives.

Answer 5

Reading Cookies:

 var cookieValue = $.cookie("cookieName"); 

Write a cookie:

 $.cookie("cookieName", "CookieValue"); 

Answer 6

You can use plain JS by referring to document.cookie .

See: http://jsfiddle.net/ShsYp/

Also: https://developer.mozilla.org/en/DOM/document.cookie

Answer 7

A simple, easy jQuery plugin for reading, writing and deleting cookies. See the link for more details on the demo and example. https://github.com/carhartl/jquery-cookie