Browser
Browser API
Topic
- Cookie, sessionStorage and localStorage.
- Blob object
- Observer
- Dynamic Import
requestAnimationFrame
CSS Paint API
CacheStorage
Cookie, sessionStorage and localStorage
Cookie
Cookie stores data which can be read and write on both of the server and the client. Cookie is passed between them on HTTP header which make transferring data slow. It is used to persist user data which means identify and authentification user. Cookies are usually limited to 4096 bytes and you are not able to store more than 20 cookies. One more important thing is that you can set expire date.
sessionStorage and localStorage
Unlike cookie, data on sessionStorage and localStorage are not passed to server. It is written and read on client side. sessionStorage is literally storage for session which means if session is finished (user close the tab), the data will be deleted. On the other hand localStorage will not deleted unless either you execute the function to delete it or user clear the cache and local storage data. Typically maximum size is2.5MBs+ depends on browser.
https://stackoverflow.com/questions/640938/what-is-the-maximum-size-of-a-web-browsers-cookies-key
http://browsercookielimits.squawky.net/
blob object
blob creates file type of immutable data with mime type. You can generate HTML, CSS, or json file as string and contains them as blob. It can be useful when you create js plugin which requires to generate and append css from javascript instead of adding link tag for js plugin.
The code is like this...
window.URL =window.URL || window.webkitURL;
var blob = newBlob(['body { background-color: yellow; }'], {type:'text/css'});
var link = document.createElement('link');
link.rel = 'stylesheet';
//createObjectURL returns a blob URL as a string.
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);
Observer
Dynamic Import
requestAnimationFrame
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame