Browser cookie enabled javascript

JavaScript: Get Cookie, Set Cookie

This page tells you how to get/set cookies using JavaScript, how to check if cookie is enabled, and how http cookie works.

What is a Cookie?

HTTP cookie is a mechanism to store data in a web browser for a website, for the purpose of persistent data.

Persistent data is needed for things like login status, session, tracking user/account, shopping cart.

For example, when you login to a site, the site send you a cookie “loggedin=true”. Your browser stores that together with the website that sent it. When you click a link to see another page on the site, the browser sends all cookies that came from the website, so the server knows you are already logged in, so won’t ask you to login.

A cookie is a line of text, but typically having the form » key = value » .

The most frequently used info stored in cookies, is a id string to identify user, and a session id.

Cookie is Sent in HTTP Message Header

Cookie mechanism is part of the HTTP protocol. It is sent as part of HTTP message header. [see HTTP Protocol Tutorial]

When server responds to a HTTP request, it includes cookies (if any) in the response HTTP header, and browser store them locally.

Everytime browser sends a HTTP request, it also send all existing cookies of the same domain to the server in the HTTP request header.

Here is a example of browser’s HTTP request header:

GET /index.html HTTP/1.1 Host: www.example.org

Here’s example: of server’s HTTP response header, including 2 lines of cookie:

HTTP/1.0 200 OK Content-type: text/html Set-Cookie: name=value Set-Cookie: name2=value2; Expires=Wed, 09 Jun 2021 10:18:14 GMT

When browser send a request for a URL, it also sends all cookies stored locally that matches the domain.

GET /spec.html HTTP/1.1 Host: www.example.org Cookie: name=value; name2=value2 Accept: */*

View Cookie in HTTP Header in Browser Dev Tool

Browser dev tool can view HTTP Headers.

Here is a real world cookie from apple.com:

Check Cookie is Enabled

Browsers have a preference setting that allow users to disable cookies.

navigator.cookieEnabled Return true if cookies is enabled. Else, false .

Get/Set Cookies with JavaScript

JavaScript can also be used to read or set a cookie. When the server sends a HTML, it can include JavaScript like this:

When browser receives that page and runs the script, it’ll set the cookie.

Set Cookie

document.cookie d»>key = value «

• you can only have one key/value pair at a time when you use this method.
• When a cookie with the same key are set again, its old value is overwritten.

// set cookies document.cookie="name=Jack;max-age=259200;path=/"; document.cookie="age=29"; document.cookie="name=Mary"; // same key overrides previous value 

Get Cookie

// show cookies console.log(document.cookie);

You can play with cookies by paste the above code in browser console.

Cookie value string cannot contain . You can use encodeURIComponent() . [see Encode URL, Escape String]

Cookie Attributes

Each cookie has a set of predefined “attributes” associated with it. The attributes tells browser whether a cookie should be send to the server, when browser requests a page.

Each attribute is a key/value pair. If a attribute is not specified, it has a default value.

path= path Path associated with the cookie. (for example, «/» , «/img» ). If not specified, defaults to the current path of the current document location. domain= domain domain name associated with the cookie. (for example, example.com , .example.com , some.example.com ) If not specified, defaults to the host portion of the request url, for example c.b.a.example.com . When browser requests a URL, it matches the host name in URL to the ones in local cookies. If any cookie’s host name is a subdomain of the host name in URL, that cookie is sent. (provided that the path attribute also passes) max-age= n n is a integer. Number of seconds into the future when the cookie will expire. This is intented to replace the harder to use “expires=” attribute. “max-age” is not supported by Internet Explorer 8 or before. If both “max-age” and “expires” are set, the “expires” is ignored. If none of “max-age” and “expires” are specified, the browser will delete the cookie when user closes browser. (a session cookie) expires= date If not specified it will expire at the end of session. The date must be in a format same as date .toUTCString() . Example: «Tue, 26 Apr 2016 23:52:26 GMT» [see Date Object] secure If present, it means this cookie will only be transmitted from HTTPS access.

Cookie Count and Size Limitation

Cookie has a limitation on total number of cookies per domain, and total size of all cookies combined per domain.

• All major browsers support at least 4k bytes of cookies per domain. (counting all cookies combined, including their attributes.)
• Major browsers support a max of 30 cookies per domain. Some support 50.

Get Cookie Values

document.cookie A property that holds a string containing a semicolon-separated list of cookies, of the form key1 = value1 ; key2 = value2 ; … .

// show all cookies for the domain console.log(document.cookie);

Cookie attributes are not returned.

Show Stored Cookies in Browser

You can use browser to show cookies.

Cookies vs Web Storage

Cookies vs Web Storage, which is better?

Cookies is set/read directly by server in HTTP message exchange.

Web Storage is JavaScript only. (JavaScript in turn, can talk to server, in many flexible ways.)

Both Cookies and Web Storage can be read/set by JavaScript on the client side.

HTTP Cookie is designed around 1995, and is a hack. Web Storage was designed about 10 years later and is much more efficient and clean.

If you need web server to directly read/set data on browser, then use cookie. Otherwise, use web storage.

DOM Scripting

Overview

DOM Methods

Basic Examples

HTML Input

Web Scripting Examples

Web Scripting Misc

• Web Cookies
• Web Storage
• Open URL
• Get Cookie Enabled Status
• Get URL
• Update URL Param
• Find Window Width
• Find Element Width
• WebSocket
• Value of “this” in Event Handler
• Event Delegation
• Copy Text
• Randomize List
• create Document Fragment

Источник

How to detect that JavaScript Cookies are disabled?

This tutorial will teach you how to detect if cookies are enabled or disabled on a website using JavaScript. Cookies are small text files on your computer that contain data. A web server terminates the connection after sending a web page to a browser and completely forgets about the user. The challenge of «how to remember information about the user» led to the invention of cookies. A cookie may contain the name of a user who visits a website. The cookie «remembers» the user’s name for the subsequent visit to the website. Cookies allow you to store user information on web pages.

In the form of a cookie, your server transmits certain data to the visitor’s browser. The cookie may be accepted by the browser. If it does, a plain text record of it is kept on the visitor’s hard disc. Now, the browser sends the same cookie to the server for retrieval when the visitor accesses a different page on your website. Once recovered, your server knows and remembers what was previously saved.

Using JavaScript, cookies can be created, retrieved, and modified directly, and the process of it is easy and simple. The value, length, and name of the cookie can be restricted. All cookie data is sent to the application server immediately when a page is requested from the browser server. As malevolent users could access this information, cookies should not be used to store sensitive information such as passwords or credit card numbers.

Let’s first see how to check in a browser if cookies are disabled.

STEP 1 − Switch on your Google Chrome browser and click on settings. Here, we can see that you have to click the three vertical dots on the top right corner of the screen.

STEP 2 − There will be a drop-down menu and from there you must click on Settings.

STEP 3 − After the Settings page opens, you have to click on Privacy and Security, as shown below.

STEP 4 − After the Privacy and Settings page opens, we have to click on Cookies and other site data as shown below.

STEP 5 − After this page opens, we can change the settings to whichever option the user seems fit.

Here, we see that the user has selected a certain setting.

Let’s see different methods to detect whether JavaScript cookies are disabled.

Using the navigator.cookieEnabled() Function

The navigator.cookieEnabled returns a Boolean value that indicates whether cookies are enabled or not. The property is read-only. It returns true if the cookies are enabled; else it returns false.

Syntax

The syntax for this function is −

if (navigator.cookieEnabled) < //Cookies Enabled; >

Example

In the below example, we will demonstrate how to detect whether the JavaScript cookies are enabled or disabled for a website. Here, we see the navigator.cookieEnabled function in JavaScript which enables to check whether cookies are enabled in the browser or not.

html> head> script type="text/javascript"> function checkCookiesStats()  if(navigator.cookieEnabled)  document.getElementById("check").innerHTML="Cookies are enabled"; > else  document.getElementById("check").innerHTML="Cookies are disabled"; > > /script> /head> body onload="checkCookiesStats()"> h2>Check if cookies are enabled/h2> p id="check">/p> /body> /html> 
 

In the above output, users can see that the site had cookies enabled and this is shown on the user’s screen.

Using Modernizr Library

Modernizr is a collection of superfast tests – or “detects” as we like to call them. Which run as your web page loads, then you can use the results to tailor the experience to the user.

Syntax

Insert the library in the file −

Example

In this example, we are checking whether JavaScript cookies are enabled in the browser or not using the Modernizr library. The function supportsCookies() checks whether the cookies are enabled on this site or not.

html> head> script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" integrity="sha512-3n19xznO0ubPpSwYCRRBgHh63DrV+bdZfHK52b1esvId4GsfwStQNPJFjeQos2h3JwCmZl0/LgLxSKMAI55hgw= token operator">="anonymous" referrerpolicy="no-referrer">/script> /head> body> h2> Detecting JavaScript cookies. /h2> p id="demo">/p> script> function supportsCookies()  try  // Create cookie document.cookie = 'cookietest=1'; var ret = document.cookie.indexOf('cookietest=') != -1; // Delete cookie document.cookie = 'cookietest=1; expires=Thu, 01-Jan-1970 00:00:01 GMT'; return true; > catch (e)  return false; > > document.getElementById("demo").innerHTML = supportsCookies(); /script> /body> /html> 
 

This output shows clearly that JavaScript cookies are disabled and give a boolean value of true.

The above two approaches show how the user can check in JavaScript whether cookies are disabled. The first approach uses an inbuilt JavaScript function and the second approach uses a library and the use of functions to help detect whether JavaScript cookies are enabled or disabled.

Источник