1. Cookie Operations
Creates or updates a cookie. You can specify expiration, path, domain, secure, and SameSite attributes.
๐ช Simple Cookie
โณ Session Cookie
๐ Secure Cookie
Reads all cookies as a semicolon-separated string. Requires parsing to get individual values.
๐ Read All
๐ Read Specific
๐ง Parse String
Updating a cookie is the same as creating - just assign a new value with the same name.
๐ Update Value
๐
Extend Expiry
โ Add Attribute
Delete a cookie by setting its expiration date to a past date. Must match path and domain.
๐๏ธ Delete Specific
๐งน Delete All
โฐ Delete Expired
Cookie Operations Output
[Ready]
๐ Click any cookie operation to see results here
๐๏ธ Clear Output
๐พ Export Results
๐ Copy Output
2. Cookie String & Properties
Current Cookie String
document.cookie = ""
Cookie Support
Checking...
// The Cookie String Format
document.cookie = "name=value; expires=date; path=/; domain=.example.com; secure; samesite=strict";
// Example cookie string output:
// "username=JohnDoe; theme=dark; sessionId=abc123; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/; secure"
// Reading cookies returns all cookies as a single string:
const cookieString = document.cookie;
// "username=JohnDoe; theme=dark; sessionId=abc123"
// Parsing the cookie string:
function parseCookies() {
return document.cookie.split('; ').reduce((cookies, cookie) => {
const [name, value] = cookie.split('=');
cookies[name] = decodeURIComponent(value);
return cookies;
}, {});
}
4. Complete Cookie Functions
// Complete Cookie Management Library
// 1. SET COOKIE FUNCTION
function setCookie(name, value, days = 7, path = '/', secure = false, sameSite = 'Strict') {
let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
// Add expiration
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
cookieString += `; expires=${date.toUTCString()}`;
}
// Add path
cookieString += `; path=${path}`;
// Add secure flag
if (secure) {
cookieString += '; secure';
}
// Add SameSite
cookieString += `; samesite=${sameSite}`;
// Set the cookie
document.cookie = cookieString;
return true;
}
// 2. GET COOKIE FUNCTION
function getCookie(name) {
const nameEQ = encodeURIComponent(name) + '=';
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i];
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1);
}
if (cookie.indexOf(nameEQ) === 0) {
return decodeURIComponent(cookie.substring(nameEQ.length));
}
}
return null;
}
// 3. CHECK COOKIE FUNCTION
function checkCookie(name) {
const value = getCookie(name);
return value !== null && value !== undefined;
}
// 4. DELETE COOKIE FUNCTION
function deleteCookie(name, path = '/') {
document.cookie = `${encodeURIComponent(name)}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=${path}`;
return true;
}
// 5. GET ALL COOKIES FUNCTION
function getAllCookies() {
return document.cookie.split('; ').reduce((cookies, cookie) => {
const [name, value] = cookie.split('=');
if (name && value) {
cookies[decodeURIComponent(name)] = decodeURIComponent(value);
}
return cookies;
}, {});
}
๐งช Test Set Cookie
๐งช Test Get Cookie
๐งช Test Check Cookie
๐งช Test Delete Cookie
5. Cookie Security & Attributes
Secure Flag
๐
Cookie only sent over HTTPS
HttpOnly Flag
๐ก๏ธ
Not accessible via JavaScript
SameSite
๐
Prevents CSRF attacks
Path Attribute
๐
Restricts cookie to path
Domain Attribute
๐
Restricts cookie to domain
Expires/Max-Age
โฐ
Controls cookie lifetime
// Security Best Practices for Cookies
// 1. ALWAYS use encodeURIComponent/decodeURIComponent
const safeValue = encodeURIComponent(userInput);
document.cookie = `name=${safeValue}`;
// 2. Use Secure flag for sensitive data (HTTPS only)
document.cookie = "session=abc123; secure; samesite=strict";
// 3. Set appropriate SameSite attribute
// - 'Strict': Most secure, no cross-site requests
// - 'Lax': Default modern browsers, safe for navigation
// - 'None': Allows cross-site, requires Secure flag
// 4. Set reasonable expiration dates
// Session cookie: No expires attribute
// Short-term: Hours or days
// Long-term: Consider other storage options
// 5. Limit cookie size (max 4KB per cookie)
if (JSON.stringify(data).length > 4000) {
console.warn("Cookie data too large, consider localStorage");
}
// 6. Don't store sensitive information in cookies
// Use server-side sessions instead
6. Cookie Analyzer
Browser Support
โ
navigator.cookieEnabled
Cookie Count
0
Total cookies present
Total Size
0 B
Combined cookie size
Path
/
Default cookie path
๐ Analyze All Cookies
7. Cookie Store Manager
No cookies in store. Create some cookies above!
๐ Refresh Store
๐พ Export Cookies
๐ฅ Import Cookies
8. Real-World Cookie Examples
๐จ User Preferences
๐ Shopping Cart
๐ Authentication
๐ Analytics Tracking
// Real-World Cookie Implementations
// 1. USER PREFERENCES COOKIE
function saveUserPreferences(preferences) {
const cookieValue = encodeURIComponent(JSON.stringify(preferences));
document.cookie = `preferences=${cookieValue}; max-age=${30 * 24 * 60 * 60}; path=/; samesite=strict`;
}
function loadUserPreferences() {
const cookieValue = getCookie('preferences');
return cookieValue ? JSON.parse(decodeURIComponent(cookieValue)) : {};
}
// 2. SHOPPING CART COOKIE
class ShoppingCart {
constructor() {
this.items = this.loadCart();
}
addItem(productId, quantity = 1) {
this.items[productId] = (this.items[productId] || 0) + quantity;
this.saveCart();
}
saveCart() {
const cartData = JSON.stringify(this.items);
document.cookie = `cart=${encodeURIComponent(cartData)}; max-age=${7 * 24 * 60 * 60}; path=/`;
}
loadCart() {
const cookieValue = getCookie('cart');
return cookieValue ? JSON.parse(decodeURIComponent(cookieValue)) : {};
}
}
// 3. SESSION MANAGEMENT
function createSession(userId) {
const sessionToken = generateSecureToken();
document.cookie = `session=${sessionToken}; secure; samesite=strict; path=/`;
return sessionToken;
}
function validateSession() {
const sessionToken = getCookie('session');
return sessionToken !== null;
}