Comment fonctionne les "storages" de Chrome ?

[christianfelicite]

https://javascript.info/localstorage

LocalStorage, sessionStorage

Web storage objects localStorage and sessionStorage allow to save key/value pairs in the browser.

What’s interesting about them is that the data survives a page refresh (for sessionStorage) and even a full browser restart (for localStorage). We’ll see that very soon.

We already have cookies. Why additional objects?

• Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most browsers allow at least 2 megabytes of data (or more) and have settings to configure that.

• Also unlike cookies, 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 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.

As you can see, it’s like a Map collection (setItem/getItem/removeItem), but also allows access by index with key(index).

[christianfelicite]

https://developers.google.com/web/ilt/pwa/working-with-indexeddb

What is IndexedDB?

IndexedDB is a large-scale, NoSQL storage system. It lets you store just about anything in the user's browser. In addition to the usual search, get, and put actions, IndexedDB also supports transactions.

Here is the definition of IndexedDB on MDN:

"IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high performance searches of this data. While DOM Storage #292 is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution."

Each IndexedDB database is unique to an origin (typically, this is the site domain or subdomain), meaning it cannot access or be accessed by any other origin. Data storage limits are usually quite large, if they exist at all, but different browsers handle limits and data eviction differently. See the Further reading section for more information.

[christianfelicite]

https://stackoverflow.com/questions/43519890/what-is-the-difference-between-local-storage-and-cache-in-the-browser

Cache is data which is used very frequently, so it is stored to reduce processing and loading required.

In a computer, the cache is what helps to hold temporary data used by the processor to compute the most basic instructions. It is a lot faster, therefore, more expensive/smaller than ram, but same ideology.

On your browser that frequent data are files like the HTML and CSS you get from a web page

Local Storage instead, is data little less generic and a little more user specific, like a form info or your already viewed pages that appear on purple at Google It is also the objects and data your CSS and HTML renders.

For example: on YouTube, you have a standard format in which information, icons, and toolbars are displayed, imagine this as the interface. Cache helps a lot here. That is why you can search for new videos without having to wait for YouTube icon, search bar, etc... to reload again.

On the other hand, When you log in to youtube or any other web page like Amazon, That site knows your id by the local storage. Local storage also has different javascript interface objects like some tabs or extra menus.

Sources:

HTML5 Local Storage VS App Cache Offline Website Browsing http://searchstorage.techtarget.com/definition/cache http://www.differencebetween.com/difference-between-ram-and-vs-cache-memory/

[christianfelicite]

https://www.bitdegree.org/learn/web-application-testing

IndexedDB is a web standard interface. It is for local transactional databases of JSON objects with indices. It allows storing more permanent data and is commonly used for bookmarks or web applications such as email.

[christianfelicite]

https://truetocode.com/web-storage-a-comparative-study-of-local-storagesession-storagecookiesindexeddb-and-websql/

Web Storage is the storage mechanism that allows Web applications to store data in Web Browsers. The various storage types include Local Storage, Session Storage, Cookies, IndexedDB, Web SQL. These storages are supported by most of the modern-day web browsers and are standardized by the World Wide Web Consortium. Web Storage lets a web application to store data which in turn helps in the effective end to end functionality of the application.

Upon inspecting and navigating to the storage in the browser console, we can see what are the various storage mechanisms supported by the browser and data stored in them.

Local Storage

Local storage is a key-value store that stores values as string.

The data stored in local storage does not have an Expiration date and will stay in the browser forever until we clear the browser data using settings or using Javascript.

Up to 10MB of data can be stored in most of the browsers and it is 10MB for Local Storage and Session Storage combined in chrome.IE has 10 MB each.

Local Storage follows the same-origin policy. The same-origin means that the Protocol(Http/Https), port and the host are the same. Only the same origin scripts can access Local Storage data

Not send to the server. Used for client-side reading the purpose

An example use case of Local storage is for storing,user-related data like settings, chosen by a user as provided in the web application.

Local storage only allows data to be stored as a string. So the objects should be JSON stringified before storing. Local storage will survive refresh and restart.

Session Storage

Session Storage is a key-value store

The data stored by Session Storage stays only until the tab/window is closed.

Up to 10MB of data can be stored in most of the browsers and it is 10MB for Local Storage and Session Storage combined in chrome.IE has 10 MB each.

Session Storage follows the same-origin policy just like Local Storage. The same-origin means that the Protocol(Http/https), port and the host are the same. Only same-origin scripts can access Session Storage data. It is also bound to a tab.

Not send to the server. Used for client-side reading purposes.

Session storage also only allows data to be stored as a string. So objects should be JSON stringified before storing. An example use case of Session storage is for storing, user-related data for one session only like language selection Session storage will survive refresh but won’t survive restart as the session is out.

Cookie

Cookie is a standard key-value store where data can be stored as a string against a key.

Cookies do have an expiration time associated with it. If no expiration time is given then the cookie will get expired at the end of the browser session.

Only up to 4kb data can be stored in the cookie in most browsers.

Cookie data are to be used in the server so they are sent to the server as a part of the request. Cookie follows same-origin policy.

Cookies are primarily used to track website activity of a user.

IndexedDB

IndexedDB is a new powerful storage that helps in storing a large amount of structured data in the client-side. IndexedDB can be utilized to make web applications run more efficient and fast in the browser as it supports storing a large amount of data in the browser.

IndexedBD is a key-value store but the value can be an object, string, array… These key-value pairs are stored in objects stores in the IndexedDB database

IndexedDB database -> collection of Object Stores -> collection of key-value pairs

IndexedDB can have any number of object stores and the object stores can contain any number of key-value pairs.

IndexedDB API is asynchronous, unlike local storage or session storage. IndexedDB operations are event-driven by various events like onsuccess,onerror,oncomplete, etc.

IndexedDB also follows the same-origin policy like Local Storage.

IndexedDB does not have a specific expiration time which means that it is persistent like Local Storage

The storage capacity is about 250 MB for Internet Explorer. FireFox has 10% of free space and Chrome has 6% of free space.

Use case of IndexedDB-Consider a web application with multiple screens in which every screen has a form in to which user enters data.We navigate through each screen with a next button and the last screen has a submit button.On every click of next button,data can be stored in to IndexedDB.In the final screen when the user clicks the submit button,data can be fetched from IndexedDB and sent to server.