localStorage & sessionStorage

localStorage & sessionStorage

Cookies are a small string of data that is stored directly in the browser.

Cookies are set by the web server using the Set-Cookie HTTP header. When a request is sent to the same domain the browser sends the cookie in this way the server knows who sent the request.

We can access cookies using document.cookie property.

An assignment to document.cookie is treated in such a way that write operation doesn't touch other cookies.

EncodeURICookie

This function is used to keep valid formatting. Using this special characters can be encoded.

The total number of cookies per domain is limited to 20+ depending on the browser.


localstorage

localstorage is a web storage object which is not sent to the server after each request.

Some methods are provided by localstorage

setItem()

Used for storing key-value pair.

getItem()

It gets the value by key.

removeItem()

This method is used to remove a specific key-value pair.

clear()

This deletes everything.

key()

This gives the key on a specific position.

length()

This function gives the length i.e. how many elements are present in localstorage. It returns the number of stored items.


sessionStorage

This is used less often than localStorage. The sessionStorage exists within the current browser tab. Another tab will have a different sessionStorage.

It has the same methods as localStorage. This data survives a page refresh.

storage event

When data is updated in localStorage or sessionStorage a storage event is triggered.

Did you find this article valuable?

Support Reuben's blog by becoming a sponsor. Any amount is appreciated!