What is local Storage in JavaScript
Local Storage in JavaScript allows Website’s or web applications to store data locally inside a User’s browser - With no expiration date. The data doesn’t get deleted when the browser is closed, and the data is available when the browser again. But there is a catch if the user delete’s his local storage data will be removed and not retrievable again.
Pro’s and Con’s of JavaScript local Storage
Pro’s
- It stores up to 5-10MB of data (depending on the browser).
- Easy to use – no need for a web server or backend database.
- Great for getting an idea up and running and for testing purposes.
Con’s
- It only stores up to 10MB of data (5MB in some browsers).
- It can only store strings. This can restrict you from using it for more complex scenarios although, HTML can be stored as a string – more on that later…
- It’s local to the browser and specific to the origin (per domain and protocol), and there’s no guarantee that the data will persist even in that same context.
Security Limitation
- It’s not secure. Don’t store any private or personal information in localStorage.
local Storage vs session Storage vs cookie
The main difference between local Storage, session Storage, and cookie storage is size.
There’s:
- 10MB available for Local Storage
- 5MB available for session Storage
- 4KB available for Cookies
Of these three Local Storage is the most recent to learn the difference of These types of storage click here
Additional Information
Unlike sessionStorage, data stored in localStorage persists, and is accessible even after the browser closes. On Stack Overflow, cssyphus put together a useful explanation that contrasts the different storage types along with a list of resources.
Session Storage is useful when you need browser storage that does not impact web application performance. Login credentials are held in session Storage as they are cleared once the open tab closes.
Cookies are the oldest kind of in-browser storage. With their small capacity, they can hold small amounts of data, and are not designed to hold sensitive data such as login credentials.
Session storage vs local Storage
Together, these two kinds of storage are the main data storage objects available that the browser can access easily for storing and retrieving information for customers. The main difference between Session and Local kinds of storage is the lifespan of the stored data.
Session Storage is tied to a specific tab the browser may have open, whereas local Storage is accessible across any tab the browser has open. Once the tab closes, the session Storage is deleted, but local Storage persists.
local Storage vs cookie
Compared to local Storage, Cookies are older, and can only fit small amounts of data. There are two kinds of Cookies: session, and persistent.
- Session Cookies, like sessionStorage, expire when the browser closes.
- A persistent Cookie has an expiry attribute, or a max-age attribute that designates when the browser deletes the data held in cookie storage.
How to use localStorage methods in JavaScript
There are four basic JavaScript local Storage methods you can use to access and work with local Storage:
- setItem() - takes a key-value pair and adds it to localStorage
- getItem() - takes a key and returns the corresponding value
- removeItem() - takes a key and removes the corresponding key-value pair
- clear() - clears localStorage (for the domain)
localStorage JavaScript example
The following demo shows how you can store information from the text area in localStorage:
- Create a simple index.html file with a single textarea, and two buttons as follows. The textarea id can be anything – in this example, we’ve called it “Here”.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>JavaScript localStorage demo</h1>
<textarea id="Here" rows="10" cols="80"></textarea>
<p></p>
<button onclick="mySave()">Save</button>
<button onclick="myLoad()">Load</button>
<script>
function mySave() {
var myContent = document.getElementById("myTextarea").value;
localStorage.setItem("myContent", myContent);
}
function myLoad() {
var myContent = localStorage.getItem("myContent");
document.getElementById("Here").value = myContent;
}
</script>
</body>
</html>
How the code looks like lies over here:
JavaScript localStorage demo
Save LoadThanks you for reading I hope you have learned a thing or two! Bye.