Local Storage isn’t too Local for JavaScript!
A clear-cut explanation of local storage along with some examples.
Storing data is one of the most important aspects of an application. Every application requires data storage in order to make the application dynamic. And, cloud is one of the most hyped methodology in the field of data storage. Similarly, for small mock web sites or web pages, the issue of data storage is efficiently handled by “local storage”.
What is local storage?
Local storage is a methodology with the use of which, web applications can store data locally within the user’s browser. One of the most pivotal factors of local storage is that, it stores the data with no expiration date.
Basics of local storage
The local storage uses the “localStorage” object to store data for your entire website on a permanent basis i.e., the data is not deleted when the browser is closed, and is available the next day, week, or year. Each and every piece of data is stored in the form of a key-value pair. But, it is very important to know that local storage can only store strings.
A common dilemma
Since, I mentioned that local storage can only store strings, so you might be thinking — What if, I want to store objects? Don’t worry, JavaScript acts as a helping hand as it provides the users with a method for converting an object into a string. It is mentioned below —
var obj = {
age: 22,
city: "Delhi"
}var stringified_object = JSON.stringify(obj);
console.log(stringified_object); // Try this code snippet!
Also, the value retrieved from the local storage is also a string. So, in order to convert the retrieved string into an object, you can use an inbuilt method in JavaScript. It is mentioned below —
var parsed_object = JSON.parse(stringified_object);
console.log(parsed_object); // Try this code snippet!Before trying your hands on some examples related to local storage, I would like to mention some basic methods/commands of local storage.
Basic commands of local storage
localStorage.setItem(key, value); // To store data
localStorage.getItem(key); // To retrieve data
localStorage.removeItem(key); // To remove data
localStorage.clear(); // To clear local storageCode snippet
var data_1 = {
name: "Kapil",
age: 22,
location: "Delhi"
}var data_2 = {
name: "Sarthak",
age: 23,
location: "Noida"
}localStorage.setItem("local_object_1", JSON.stringify(data_1));
localStorage.setItem("local_object_2", JSON.stringify(data_2));console.log(localStorage);localStorage.removeItem("local_object_1");console.log(localStorage);var retrieved = localStorage.getItem("local_object_2");
retrieved = JSON.parse(retrieved);console.log(retrieved);localStorage.clear();console.log(localStorage);
Illustration
- Firstly, I declared two objects namely — “data_1” and “data_2”. These two objects have three different properties including name, age and location.
- Then, I stored these two objects, after converting them to strings, in local storage in the form of two different keys namely — “local_object_1” and “local_object_2” respectively.
- In order to make sure that these two “stringified” objects are added to the local storage, I printed the value of the local storage in the console.
- Hence, I removed one of the keys of the local storage, and retrieved the left over data in a variable named “retrieved”, after converting the left over data back to objects.
- Then, in order to make sure that the data stored in “retrieved” is an object, I printed the value of “retrieved” on the console.
- Lastly, I cleared the entire local storage leaving behind not a single key-value pair.
Summary
In this article, I have briefed you about the concept of local storage and some basic commands of local storage. Along with the concept, I have also included a code snippet which includes all the basic commands of local storage mentioned above. The explanation to the code snippet is also provided just below the code snippet.