LearnCodeLive

Cookies · Astro Tech Blog
Web Development / Frontend / JavaScript DOM / Storage

Cookies

Cookies are small pieces of data stored by the browser and sent with every HTTP request to the same domain. They’re primarily used for session management, personalization, and tracking.

Each cookie has these attributes:

AttributeDescriptionExample
name=valueThe cookie data (URL-encoded)session=abc123
domainWhich domains can read the cookie.example.com
pathURL path scope/
expires / max-ageExpiration dateSession or specific date
secureOnly send over HTTPS—
samesiteCross-site request behaviorLax, Strict, None
httponlyNot accessible via JavaScript— (server-set only)

Reading Cookies

console.log(document.cookie);
// "theme=dark; session=abc123; lang=en"
Demo: Reading Cookies
HTML 
<div>
<button id='read-cookies'>Read All Cookies</button>
<pre id='cookie-out' style='background:#f1f5f9;padding:12px;border-radius:6px;'></pre>
</div>
JavaScript 
const out = document.getElementById('cookie-out');

document.getElementById('read-cookies').onclick = function() {
const cookies = document.cookie;
out.textContent =
'document.cookie:' + '\\n' +
(cookies ? cookies : '(no cookies set)') + '\\n' +
'---' + '\\n' +
'Note: HttpOnly cookies are not visible via JS';
};
Live Output Window

Writing Cookies

document.cookie = 'username=Alice; path=/; max-age=3600';

Setting document.cookie appends a new cookie (doesn’t overwrite all cookies). To change a cookie, set it with the same name, path, and domain.

Demo: Writing Cookies
HTML 
<div>
<div style='display:flex;gap:8px;margin-bottom:8px;'>
<input id='cookie-name' type='text' value='theme' placeholder='Name' style='flex:1;padding:6px;border:1px solid #cbd5e1;border-radius:4px;'>
<input id='cookie-value' type='text' value='dark' placeholder='Value' style='flex:1;padding:6px;border:1px solid #cbd5e1;border-radius:4px;'>
</div>
<button id='set-cookie'>Set Cookie</button>
<button id='delete-cookie'>Delete 'theme' Cookie</button>
<pre id='cookie-set-out' style='background:#f1f5f9;padding:12px;border-radius:6px;'></pre>
</div>
JavaScript 
const out = document.getElementById('cookie-set-out');

function readCookies() {
return document.cookie || '(no cookies)';
}

document.getElementById('set-cookie').onclick = function() {
const name = document.getElementById('cookie-name').value;
const value = document.getElementById('cookie-value').value;
document.cookie = name + '=' + encodeURIComponent(value) + '; path=/; max-age=3600';
out.textContent = 'Set cookie: ' + name + '=' + value + '\\n' + 'Cookies now: ' + readCookies();
};

document.getElementById('delete-cookie').onclick = function() {
document.cookie = 'theme=; path=/; max-age=0';
out.textContent = 'Deleted 'theme' cookie\\n' + 'Cookies now: ' + readCookies();
};
Live Output Window
function getCookie(name) {
  const matches = document.cookie.match(
    new RegExp('(?:^|; )' + name.replace(/([.$?*|{}()\[\]\\\/+^])/g, '\\$1') + '=([^;]*)')
  );
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

function setCookie(name, value, options = {}) {
  let cookie = name + '=' + encodeURIComponent(value);

  if (options.maxAge) cookie += '; max-age=' + options.maxAge;
  if (options.path) cookie += '; path=' + options.path;
  if (options.domain) cookie += '; domain=' + options.domain;
  if (options.secure) cookie += '; secure';
  if (options.sameSite) cookie += '; samesite=' + options.sameSite;

  document.cookie = cookie;
}

function deleteCookie(name) {
  setCookie(name, '', { maxAge: 0 });
}
Demo: Cookie Utilities
HTML 
<div>
<button id='util-set'>Set Cookie: visited=true (1hr)</button>
<button id='util-get'>Get Cookie: visited</button>
<button id='util-del'>Delete Cookie: visited</button>
<pre id='util-out' style='background:#f1f5f9;padding:12px;border-radius:6px;'></pre>
</div>
JavaScript 
const out = document.getElementById('util-out');

function getCookie(name) {
const matches = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/([.$?*|{}()\\[\\]\\\\\\/+^])/g, '\\\\$1') + '=([^;]*)'));
return matches ? decodeURIComponent(matches[1]) : undefined;
}

function setCookie(name, value, options = {}) {
let cookie = name + '=' + encodeURIComponent(value);
if (options.maxAge) cookie += '; max-age=' + options.maxAge;
if (options.path) cookie += '; path=' + (options.path || '/');
document.cookie = cookie;
}

function deleteCookie(name) {
setCookie(name, '', { maxAge: 0 });
}

document.getElementById('util-set').onclick = function() {
setCookie('visited', 'true', { maxAge: 3600 });
out.textContent = 'Set visited=true (expires in 1 hour)';
};

document.getElementById('util-get').onclick = function() {
const val = getCookie('visited');
out.textContent = 'Cookie visited:' + (val !== undefined ? val : '(not set)');
};

document.getElementById('util-del').onclick = function() {
deleteCookie('visited');
out.textContent = 'Cookie visited deleted';
};
Live Output Window
OptionValuesDescription
max-ageSecondsCookie lifetime
path/, /appURL path scope
domain.example.comAllow subdomains
secure—Only HTTPS
samesiteStrict, Lax, NoneCSRF protection
httponly—Not accessible via JS

SameSite Explained

ValueBehavior
StrictCookie sent only for same-site requests
LaxCookie sent for top-level navigations (default)
NoneCookie sent for all requests (requires secure)
  • Max 4KB per cookie
  • Max ~50 cookies per domain (browser-dependent)
  • Max ~4KB total across all cookies for a domain

Cookies vs Other Storage

FeatureCookieslocalStoragesessionStorage
Capacity4KB5-10MB5-10MB
Sent to server✅ Yes (every request)❌ No❌ No
ExpirationManual or sessionManualTab close
AccessClient + ServerClient onlyClient only

Key Takeaways

  • document.cookie reads all cookies (except HttpOnly) as a string
  • Set cookies by assigning to document.cookie (appends, doesn’t replace)
  • Cookies are sent with every HTTP request — affects performance
  • Max 4KB per cookie — use localStorage for larger data
  • SameSite=Lax is the modern default for security
  • HttpOnly cookies (set by server) are invisible to JavaScript
  • Always encodeURIComponent/decodeURIComponent cookie values