Choose and observe storage
Understand origin and site boundaries
Separate origins, sites, tabs, and top-level storage partitions so data does not cross a boundary by accident.
8 minute lesson
A storage boundary begins with the URL. Small URL changes can create a different browser bucket.
An origin is the scheme, host, and port. https://notes.test and http://notes.test have different origins. So do notes.test and app.notes.test. Web Storage and IndexedDB normally follow this origin boundary.
Cookies use domain and path matching, while SameSite reasons about sites rather than origins. Embedded third-party content may also receive partitioned storage keyed by the top-level site. Do not treat these terms as interchangeable.
sessionStorage adds another boundary: the top-level tab. Two same-origin tabs share localStorage, but normally have separate sessionStorage page sessions. We will use that difference for editor drafts.
Open the same test page on HTTP, HTTPS, a subdomain, another port, and a second tab. Predict which values are shared before inspecting each storage area in DevTools.
Lesson completed