Data Storing in Browser

Question 1

localStorage and sessionStorage

Answer 1

Web storage objects localStorage and sessionStorage allow to save key/value pairs in the browser. data survives a page refresh (for sessionStorage) and even a full browser restart (for localStorage)

Question 2

Browser Storage vs Cookies

Answer 2

Unlike cookies, 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.

Question 3

Storage Binding

Answer 3

The storage is bound to the origin (domain/protocol/port triplet)

Question 4

Methods

Answer 4

localStorage is like a Map collection (setItem/getItem/removeItem), but also allows access by index with key(index).

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.

both key and value must be strings.

Question 5

Local Storage main features

Answer 5

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.

Question 6

Storage Limit

Answer 6

The limit is 5mb+, depends on the browser.

Question 7

Viewing local storage details

Answer 7

Open Developer Tools (F12 or Ctrl + Shift + I).

Go to the Application tab.

In the left sidebar, expand Storage → Click Local Storage.

Select your website domain.

You’ll see key-value pairs stored in localStorage.

Question 8

Viewing local storage details using console

Answer 8

console.log(localStorage);

Question 9

Cookies