Local Storage in Javascript
Local Storage allows developers/designers to store data in a browser with no expiry date. It can store data longer period of time till then users don’t delete cache and history from their browser.
What is Local Storage
Local storage is web storage that is used to store data in a browser. Sometimes we have a need to store some data of users that is not very important for us like cart data, or any kind of data that is temporary or not sensitive then we store such kind of data in a browser using local storage.
Local storage has a better capacity than cookies, cookies can store up to 5 MB of data, but local storage can store more than 5 MB so we can also say that local storage is an advanced version of cookies to store data that is larger than 5 MB.
When to Use Local Storage
Local Storage is used to store data that is not sensitive or we can say that is not very important. This is because third-party individuals can easily access the information.
- Store temporary data like cart data.
- Store Users accessed page URLs like eCommerce website store URLs of users.
- Store form data temporarily like the vista print website uses.
Limitations of Local Storage
- Insecure data.
- Synchronous operations.
- Limited storage capacity.
Local Storage Methods
There are four methods that local storage uses to store data, get data, and remove data. Which are the following:
setItem(): This method is used to store data. It uses keys and values to store data.
Syntax:
localStorage.setItem("key", "value");
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="name">
<input type="text" id="email">
<button type="button" onclick="save();">save</button>
<script>
function save()
{
var name=document.getElementById("name").value;
var email = document.getElementById("email").value;
localStorage.setItem("localname", name);
localStorage.setItem("localemail", email);
}
</script>
</body>
</html>
getItem(): This method is used to get data from local storage. It requires the key name to get value.
Syntax:
localStorage.setItem("key");
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Name: <span id="name"></span></p>
<p>Email: <span id="email"></span></p>
<script>
document.getElementById("name").innerHTML=localStorage.getItem("localname");
document.getElementById("email").innerHTML= localStorage.getItem("localemail");
</script>
</body>
</html>
removeItem(): This method is used to remove data from local storage. It requires the key name to remove data.
Syntax:
localStorage.removeItem("key");
clear(): This method is used to remove all data from local storage.
Syntax:
localStorage.clear()
Categories: web designing javascript front end developer
