You can use JavaScript to get or set cookie values on the client.

Using the vanilla JavaScript API

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

• Prevents you from data breaches and liability risks
• Upgrade at your own pace
• Works with modern Rubies

Read more Show archive.org snapshot

In JavaScript, document.cookie Show archive.org snapshot is an accessor to all cookies on the current site. It looks like a String, but its setter is actually more powerful.

When setting cookies this way, remember to set the path=/ option.

Reading cookies

A result may look like this:

hello=universe; foo=bar

This means that there are 2 cookies: "hello" with value "universe", and "foo" with value "bar".

It is actually just a String without any magic powers. In order to read a cookie's value, you need to parse the string:

document.cookie.match(/hello=([^;]+)/)[1]
// => "universe"

Set a cookie

Setting cookies works as simple as this:

document.cookie = "yes=please"

However, this will not overwrite any existing cookies. The document.cookie setter will magically update your cookie list.

Reading again, we will see the cookie that we just stored, and any cookies that existed previously.

document.cookie
// => "hello=universe; foo=bar; yes=please"

That applies to all browsers.

Options

Cookie options like expiry or the path it is valid for can be set as part of the string:

document.cookie = "yes=please; expires=Sun, 1 May 2016 13:37:00 UTC; path=/"

Important: If you do not set a path, the cookie will be valid for the current path only. You probably always want path=/.

Remove a cookie

To remove a cookie, set its value to an empty string and use a past expiration date:

document.cookie = "yes=; expires=Thu, 01-Jan-70 00:00:01 UTC; path=/"

Using a library

If you are regularly working with cookies in JavaScript, you may want to use a library that simplifies this.

Cookies.js Show archive.org snapshot is small and works nicely. Here's a usage example:

Cookies.set('hello', 'universe')
// (sets a cookie)

Cookies.get('hello')
// => "universe"

Cookies.set('key', 'value', { expires: 600, secure: true })
// (sets a cookie that is flagged "Secure" and expires in 10 minutes)

Note that Cookies.js automatically sets path=/ by default which is nice.