Javascript Local Storage: The browser as a datastore
With Javascript Local Storage, you can turn your browser into a datastore. That is, you can set and retrieve objects within the web browser and store data with no expiration date.
di Antonio Lamorgese
Javascript is undoubtedly the most used and widespread language in the world. Useful for running code inside a web browser window. Over time it has also become a very reliable and mature language. Like all languages, it is characterized by the presence of APIs that enrich the language with extraordinary functionality. For some years now the Web Storage API, that is the library that deals with the management of the storage of objects, used in the execution phase of Javascript code, has been updated with the implementation of two new properties managed by the window object. The two properties in question are: localStorage and sessionStorage. Both create “Javascript Local Storage”. An environment that will transform your web browser into a real local datastore of objects.
Table of contents...
1. Difference between Cookie, localStorage and sessionStorage
Surely you are wondering: “What difference is there in managing a datastore using cookies from a management carried out using localStorage and sessionStorage?” The question is more than pertinent and, to be honest, I’m glad you asked it. As you well know, programming languages evolve and this evolution is often imposed by factors that impose an ever higher level of security management. Especially in the web environment. In fact, they work on the same origin policy. Therefore, the data stored on the client side will only be available on this source. Unlike cookies, localStorage and sessionStorage have wider memory limits for storing data. You will remember that with cookies you had a maximum of 4KB at your disposal. Well, localStorage and sessionStorage have a good 5MB available for the whole datastore. Furthermore, since the data can only be managed on the client side, it will not be sent from time to time to the server, reducing the traffic between client and server.
Read more: 12 JavaScript tricks that you’ll never find in most tutorials
2. Javascript Local Storage in Action
Now, after having dispelled all kinds of doubts about the use of Javascript Local Storage, let’s go back to the localStorage and sessionStorage properties. Like everything that has to do with development in general, a good example is the most important resource to explain in detail the implementation and use of these two fundamental properties. First, however, I anticipate that to set and retrieve data from the browser datastore, both localStorage and sessionStorage, they use two methods that leave no doubt about their function. The two methods are: setItem and getItem. In the following two examples, whose code you can test, by copying and pasting, in your html page, the two methods are implemented with disarming simplicity.
localstorage example:
<! DOCTYPE html>
<html>
<body>
<h1> How localStorage works </h1>
<h2> The localStorage property </h2>
<p> The name stored in localStorage is: </p>
<p id = "demo"> </p>
<script>
// -------------------------------
// Set the "lastname" variable
// -------------------------------
localStorage.setItem ("lastname", "Smith");
// -----------------------------------------------
// Get the content of the "lastname" variable
// and displays it in the "demo" paragraph
// -----------------------------------------------
document.getElementById ("demo"). innerHTML = localStorage.getItem ("lastname");
</script>
</body>
</html>
sessionStorage example:
<html>
<body>
<h1> How sessionStorage works </h1>
<h2> The sessionStorage property </h2>
<p> The Name is: </p>
<p id = "demo"> </p>
<script>
// -------------------------------------------
// Set the "lastname" session variable
// -------------------------------------------
sessionStorage.setItem ("lastname", "Smith");
// ------------------------------------------------ -----------
// Get the contents of the session variable "lastname"
// and displays it in the "demo" paragraph
// ------------------------------------------------ -----------
let personName = sessionStorage.getItem ("lastname");
document.getElementById ("demo"). innerHTML = personName;
</script>
</body>
</html>
The code leaves no doubt. Understanding the operation of these two extraordinary properties of the window object is extremely simple. However, it is worth pointing out when to use localStorage and when to use sessionStorage. The substantial difference between localStorage and sessionStorage concerns only the visibility that the objects treated have within the datastore of a browser. In fact, while with sessionStorage the objects are visible only for the window / tab in which they were set and remain active until the window / tab of the browser that generated them is closed. With localStorage the data persist until they are explicitly deleted and, if not removed, they will also be available for future visits to the web page but only on the same origin. The data stored with localStorage has no expiry date.
Read more: Web app development with WordPress, PHP and CodeLess Framework
3. Delete localStorage objects
As previously mentioned, Javascript has been enriched with two properties. The first, localStorage, very convenient and widely used by developers, capable of storing data within the browser, but, after closing the browser window / tab that generated the data, the information will continue to persist until the developer it will not explicitly delete them. The second property, sessionStorage, defines session objects. As for sessionStorage, managing session objects, they will be automatically removed when the browser or window / tab that generated them is closed. While, the elimination of objects, generated with the localStorage property, occurs explicitly. This means that the programmer will manage its life.
Deleting objects created by localStorage is very simple. In fact, this property has a “removeItem” method that receives the object to be deleted as a parameter. So, if you want to delete the “lastname” object, present in the two scripts discussed in the previous paragraph, you need to run this command:
localStorage.removeItem ('lastname');After running this command, the “lastname” object will be completely removed from the browser’s datastore. Until this operation is carried out, all objects, created with the localStorage property, will always be available, even after days, on the same origin. That is, the same computer and the same browser will access localStorage objects until they are explicitly deleted.
4. Conclusion
To dispel any doubts about the use of these two extraordinary new properties of the window object, I recommend that you follow this short video tutorial that will allow you to understand in detail the differences between these two fundamental properties.
