Application Tab is a tool provided by Edge to view, edit, and delete cookies. Cookies are small files storing user-related information that is being stored by the web server using the client browser to make the website dynamic, i.e., the same site but different UI or functionality for different users.
For example, if we visit a site and by default, it is in light mode, we change it to dark mode. The next time we visit the site, it presents itself in dark mode because the user theme choice is stored as a cookie.
How to view cookie information:
The Cookies pane is present in the Application Tab in developer tools. To open it follow these steps:
- Step 1: Launch Microsoft Edge and visit the site whose cookie information you want to access.
- Step 2: Right-click on the page and select “Inspect” or press Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (Mac) on your keyboard to open the Developer Tools.
- Step 3: In the Developers Tools, there will be multiple tabs Click on the one named “Application”.
- Step 4: In the Application tab on the left-hand side under Storage, click the “Cookies” pane. You will get a list of all the URLs that store cookies; if you click on one of them, you will get information about various cookies in the right section.
Cookies Pane in Application Tab
Understanding Various Options To Filter and Delete Cookies:
Lets move from left to right to understand the various options provided to us.
Options on top of the right section
- Refresh: This button refresh the list of cookies.
- Filter: You can filter the list of cookies by name, value or domain.
- Clear all cookies: Clears the whole list of cookies.
- Delete Selected: If you select a cookie then this button gets activated and allow you to delete only that particular cookie.
- Only show cookies with an issue: It filters the list to showcase only those cookies which issues.
Understanding Various Fields and Edit them:
1. Fields of a Cookie:
The complete information about the cookie is separated under various fields shown below:
Various Fields of Cookies
- Name: Displays the name of the cookie.
- Value: The actual value stored in the cookie. Sometimes it is encoded and not understandable.
- Domain: The hosts which allowed to receive the cookie.
- Path. It is the part of URL that exist in the requested URL.
- Expires / Max-Age: Permanent cookies have an expiration date or maximum age of the cookie. Session cookies last until the browser is closed so the value is always “Session”.
- Size. Max Size(in bytes) of the cookie.
- HttpOnly: If a tick is there than it indicates that the cookie can only be used over HTTP.
- Secure: If a tick is there than it indicates that the cookie can only be sent over HTTPS.
-
SameSite: It allows you to control whether or not a cookie is sent with cross-site requests. The possible attribute values are:
- Strict: It sends the cookie to same site that set the cookie.
- Lax: This is the default behavior if the “SameSite” attribute is not specified(means blank). It sends cookie when a user is navigating to the origin site from an external site.
- None: It sends the cookie with both cross-site and same-site requests.
- Partition Key: It indicates that the cookie should be stored using partitioned storage.
- Priority: It allows servers to protect important cookies. Possible values are low, medium (default), or high.
2. Edit Fields of a Cookie:
We can only edit Name, Value, Domain, Path, and Expires / Max-Age fields. To edit any field data we can just double click the field data and type our own data and then press Enter.
Edited the Cookie Name and Value
Handling Cookies with JavaScript:
You can use JavaScript to read, create, update and delete cookies in your site. JavaScript uses the document object and cookie property to handle cookies. Let us understand one by one all operations done with the cookies using JS. All the code is executed using the HTML, CSS and JS IDE of GFG so, to test the code copy the below JS code under a script tag.
1. Create a Cookie:
You can set the cookie using “document.cookie” property the values to be passed are name, value, expiry date and path. In the below code a myCookie() is called by passing the name, value and expiry days of the cookie. Its uses the date object to set the expiry date of the cookie in UTC.
function myCookie(name, value, days) {
// variable used to store expire date in UTC
let expires = "";
// checks if user passed the expiry days
if (days) {
const date = new Date();
// set the date object time to the expiry time in miliseconds
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
// sets the approprate cookie format which
// will be used in creation of the cookie
expires = "; expires=" + date.toUTCString();
}
// creates the cookie
document.cookie = name + "=" + value + expires + "; path=/";
}
myCookie('GFG', 'Hello World', 2);
// This creates a cookie named 'GFG' with the
// value 'Hello World' that expires in 2 days.
|
Output:
My custom created Cookie
2. Read a Cookie:
You can use “document.cookie” property to get all the cookies and there value. It will return all cookies with there values separated by ‘;’ in the format cookieName=value; .
Use the below code to get all cookies at once.
let allCookies = document.cookie; console.log(allCookies); |
Output:
All cookies of GFG
You can also get the cookie with respect to a given name. We create a readCookie() which takes a name parameter. The “document.cookie” property returns all the cookies name with value so, to get a particular cookie we first split the cookies into an array of string of cookieName=value. The function then removes any initial space in the strings and then check for the name of the cookie if its matched then it returns the value of the cookie.
function readCookieWithName(name) {
// Your cookie name with = sign
const nameEQ = name + "=";
// Spilits all the cookies to only name=value string array
const cookies = document.cookie.split(';');
for(let i = 0; i < cookies.length; i++) {
let cookie = cookies[i];
while (cookie.charAt(0) === ' ')
// Removes the starting space in each string of the array.
cookie = cookie.substring(1, cookie.length);
if (cookie.indexOf(nameEQ) === 0)
// Returns only the value part of the matched cookie name
return cookie.substring(nameEQ.length, cookie.length);
}
return null;
} // Reading a cookie of GFG site with name gfg_theme let mycookie = readCookieWithName('gfg_theme');
console.log(mycookie); / |
Output:
Reading Cookie named gfg_theme
3. Update a Cookie:
You can edit a cookies name, value, path and expiry days using the document.cookie property. Just have the updated value in sting and pass it into document.cookie property.
function updateCookie(name, value, days) {
// Variable use to store the expiry date
const expires = new Date();
// Sets the expiry date with respect to current time
expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
// Updates the cookie with new values
document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
} updateCookie('GFG', 'HI GFG', 10);
|
Output:
Updating GFG cookie
4. Delete a Cookie:
You can delete the cookie by setting the expires parameter to a past date. The function below just take the cookie name to be deleted and set the cookie name to a empty value and sets the expiry time to be some past date.
function deleteCookie(name) {
// Changes the value to empty string and set the expiry time to a past date
document.cookie = `${name}=;expires=Thu, 01 Jan 2000 00:00:00 UTC;path=/;`;
} deleteCookie('GFG'); // On function call it deletes the GFG cookie.
|
Output: You can see GFG cookie is not present in the image below.
Deleted GFG cookie
Conclusion
Cookies are a way for website to identify the user and provide features and UI changes targeting that user. Edge allows us tools to monitor and modify these cookies. You can check all the cookies information in a tabular manner. Edge browser can be used during development when we create, update, delete or read a cookie to monitor and debug these cookies.