JavaScript

Last Updated: 4/13/2023

Storage

  • Web storage objects localStorage and sessionStorage allow to save key/value pairs in the browser
  • Web storage objects are not sent to server with each request. Because of that, we can store much more. Most modern browsers allow at least 5 megabytes of data (or more) and have settings to configure that.
  • The server can’t manipulate storage objects via HTTP headers. Everything’s done in JavaScript.
  • The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can’t access data from each other.

Both storage objects provide the same methods and properties:

  • setItem(key, value): store key/value pair.
  • getItem(key): get the value by key.
  • removeItem(key): remove the key with its value.
  • clear(): delete everything.
  • key(index): get the key on a given position.
  • length: the number of stored items.

localStorage

  • Shared between all tabs and windows from the same origin.
  • The data does not expire. It remains after the browser restart and even OS reboot.

sessionStorage

  • The sessionStorage exists only within the current browser tab.
  • Another tab with the same page will have a different storage.
  • But it is shared between iframes in the same tab (assuming they come from the same origin).
  • The data survives page refresh, but not closing/opening the tab.
Previous