Browser Side Storages
Browser Side Storages
localStorage and sessionStorage:
- They are called Web storage objects
- They allow to save key/value pairs in the browser, maxSize 5MB,
- Both have the same set of methods,
localStorage.setItem(key, value) // – store key/value pair.
localStorage.getItem(key) // – get the value by key.
localStorage.removeItem(key) // – remove the key with its value.
localStorage.clear() // – delete everything.
localStorage.key(index) // – get the key on a given position.
localStorage.length // – the number of stored items.
sessionStorage.setItem(key, value) // – store key/value pair.
sessionStorage.getItem(key) // – get the value by key.
sessionStorage.removeItem(key) // – remove the key with its value.
sessionStorage.clear() // – delete everything.
sessionStorage.key(index) // – get the key on a given position.
sessionStorage.length // – the number of stored items.
Browser Side Storages
localStorage and sessionStorage:
- Data stored in localStorage remains after page refresh, closing the tab or even after closing the entire browser window
- Data stored in sessionStorage remains after page refresh, but is lost on closing the tab or on closing the browser window
- The localStorage is shared between all windows with the same origin, so if we set the data in one window, the change becomes visible in another one
- We only have to be on the same origin (domain/port/protocol), the url path can be different,
Browser Side Storages
localStorage and sessionStorage:
- You can also treat localStorage very similar to an object:
- these can only store strings, so for objects you'd need JSON methods.
// set key
localStorage.test = 2;
// get key
alert( localStorage.test ); // 2
// remove key
delete localStorage.test;
// Only Strings can be added
localStorage.user = JSON.stringify({name: "John"});
// accessing objects
let user = JSON.parse( localStorage.user );
alert( user.name ); // John
Browser Side Storages
localStorage and sessionStorage:
- Looping through
// One way is to loop over them as over an array:
for(let i=0; i<localStorage.length; i++) {
let key = localStorage.key(i);
alert(`${key}: ${localStorage.getItem(key)}`);
}
// Another way is to use for key in localStorage loop,
// just as we do with regular objects.
// It iterates over keys, but also outputs
// few built-in fields that we don’t need:
// bad try
for(let key in localStorage) {
alert(key); // shows getItem,
// setItem and other built-in stuff
}
// …So we need either to filter fields
// from the prototype with hasOwnProperty check:
for(let key in localStorage) {
if (!localStorage.hasOwnProperty(key)) {
continue; // skip keys like "setItem", "getItem" etc
}
alert(`${key}: ${localStorage.getItem(key)}`);
}
// Or just get the “own” keys with Object.keys
// and then loop over them if needed:
let keys = Object.keys(localStorage);
for(let key of keys) {
alert(`${key}: ${localStorage.getItem(key)}`);
}
Browser Side Storages
Cookies:
- Cookies are small strings of data that are stored directly in the browser.
-
One of the most widespread use cases is authentication:
- Cookies are usually set by a web server using the response Set-Cookie HTTP header.
- Then, the browser automatically adds them to (almost) every request to the same domain using the Cookie HTTP header. -
Steps overview:
- Upon sign-in, the server uses the Set-Cookie HTTP header in the API response to set a cookie with a unique “session identifier”.
- Next time the request is sent to the same domain (API call), the browser sends the cookie over the net using the Cookie HTTP header.
- So the server knows who made the request.
Browser Side Storages
Cookies:
- Reading cookies
The value of document.cookie consists of name=value pairs, delimited by ;. Each one is a separate cookie. - Writing to document.cookie
- One cookie can only store 4KB data
document.cookie // cookie1=value1; cookie2=value2;
document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies
Browser Side Storages
Cookies:
Few special cookies:
domain
domain=site.com
- A domain defines where the cookie is accessible.
- In practice though, there are limitations. We can’t set any domain.
- There’s no way to let a cookie be accessible from another 2nd-level domain, so other.com will never receive a cookie set at site.com.
- It’s a safety restriction, to allow us to store sensitive data in cookies that should be available only on one site.
- By default, a cookie is accessible only at the domain that sets it.
- Please note, by default, a cookie is not shared with a subdomain, such as forum.site.com.
Browser Side Storages
Cookies:
Few special cookies:
path
path=/mypath
- The URL path prefix must be absolute.
- It makes the cookie accessible for pages under that path.
- By default, it’s the current path.
Browser Side Storages
Cookies:
Few special cookies:
expires, max-age
- By default, if a cookie doesn’t have one of these attributes, it disappears when the browser/tab is closed. Such cookies are called “session cookies”
- To let cookies survive a browser close, we can set either the expires or max-age attribute. max-Age has precedence if both are set.
- expires=Tue, 19 Jan 2038 03:14:07 GMT
- The cookie expiration date defines the time when the browser will automatically delete it (according to the browser’s time zone).
- If we set expires to a date in the past, the cookie is deleted.
Browser Side Storages
Cookies:
Few special cookies:
secure
secure
- The cookie should be transferred only over HTTPS.
- By default, if we set a cookie at http://site.com, then it also appears at https://site.com and vice versa.
- That is, cookies are domain-based, they do not distinguish between the protocols.
Browser Side Storages
Cookies:
Few special cookies:
httpOnly
- This attribute has nothing to do with JavaScript, but we have to mention it for completeness.
- The web server uses the Set-Cookie header to set a cookie. Also, it may set the httpOnly attribute.
- This attribute forbids any JavaScript access to the cookie. We can’t see such a cookie or manipulate it using document.cookie.
Browser Side Storages
Cookies:
Third-party cookies
- A cookie is called “third-party” if it’s placed by a domain other than the page the user is visiting.
- For instance:
- A page at site.com loads a banner from another site: <img src="https://ads.com/banner.png">.
Browser Side Storages
By Yash Priyam
Browser Side Storages
- 101