document.cookie
String-based interface for non-HttpOnly cookies.
Platform under construction
Cookies
Cookies are small pieces of data attached to a site. They can be sent with HTTP requests and controlled with attributes.
document.cookie = "theme=dark; Path=/; SameSite=Lax"; console.log(document.cookie);
Browser APIs & BOM
Cookies are request-aware storage with important security attributes.
Cookies are often used for sessions, preferences and server-side state. Unlike localStorage, cookies can be sent to the server with requests.
JavaScript can read and write non-HttpOnly cookies through document.cookie. HttpOnly cookies are intentionally hidden from JavaScript.
Cookie attributes such as Path, Max-Age, Secure, HttpOnly and SameSite decide where cookies apply and how safely they behave.
HttpOnly
Server-set attribute that hides a cookie from JavaScript.
Secure
Sends cookie only over HTTPS.
SameSite
Controls cross-site cookie behavior.
Examples
Browser APIs should be used with capability checks, permissions and fallbacks.
Use security attributes deliberately
document.cookie = "theme=dark; Path=/; Max-Age=2592000; SameSite=Lax; Secure";
Putting sensitive values in JavaScript-readable cookies
document.cookie = `token=${token}; Path=/`;
Code patterns
Reusable examples for quick reference.
These examples focus on practical browser APIs: URL state, storage, cookies, clipboard, permissions, observers and offline-capable platform tools.
Set preference cookie
Include basic attributes.
document.cookie = "theme=dark; Path=/; Max-Age=2592000; SameSite=Lax";
Read cookie string
document.cookie returns a semicolon-separated string.
const allCookies = document.cookie;
Delete cookie
Expire it with Max-Age=0.
document.cookie = "theme=; Path=/; Max-Age=0; SameSite=Lax";
Session cookies
Sensitive session cookies should usually be HttpOnly from the server.
// Set-Cookie: session=...; HttpOnly; Secure; SameSite=Lax
Rules that matter
Treat the browser as a platform.
Browser APIs are powerful because they touch privacy, navigation, storage, permissions and performance. Use them deliberately.
Use HttpOnly for session secrets
JavaScript should not read session tokens.
Use Secure on HTTPS
Sensitive cookies should not travel over plain HTTP.
Set SameSite deliberately
It helps reduce cross-site request risk.
Keep cookies small
Cookies can be sent with requests.
Know Path and Domain scope
Scope determines where cookies apply.
Respect consent rules
Analytics and marketing cookies can require consent depending on jurisdiction.
Production thinking
A strong browser API layer makes features feel integrated with the platform instead of bolted onto the page.
Why does this matter?
Cookies sit at the boundary between browser and server, so mistakes can become security and privacy problems.
Accessibility
Cookie banners and preference controls should be keyboard accessible and clearly worded.
Production note
Production authentication cookies should be set by the server with HttpOnly, Secure and SameSite where appropriate.
SEO note
Cookie walls and consent overlays should not block crawlable content unnecessarily.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Add a delete-cookie string.
- Explain why HttpOnly is not set from JavaScript.
- Add SameSite=Strict and discuss the tradeoff.
Practice assignment
Do this before moving to the next topic.
- Write one cookie string.
- Name three cookie attributes.
- Explain why session cookies should be HttpOnly.
Try it yourself
Understand cookie strings safely
Self-check
Before you continue, prove that you understand Cookies.
If you can explain support, permissions, fallback and cleanup, you are ready to use the API responsibly.
- Can you explain cookies?
- Can you explain HttpOnly?
- Can you explain Secure?
- Can you explain SameSite?
- Can you explain why cookies can affect requests?
Senior audit upgrade
Extra production context for Cookies.
Privacy and fallback checklist
- Ask for permission only when the user understands why.
- Handle denied, unsupported and unavailable states.
- Avoid storing sensitive data in browser storage by default.
- Do not make critical content depend on a permission prompt.