If you have a website, you might quickly realize you want to collect data on your site’s visitors. How are they using your site? What features are they using? What preferences do they have? Or even something as basic as what’s the user’s name?
And by collecting such data, you can personalize the user’s experience, make the website tailored to their needs, and make the overall experience a great and memorable one. Additionally, you can also better determine what type of functionality or content you can showcase on your site that your users actually want.
For example, imagine you build a web game with twenty different levels. Wouldn’t it be great if your web page stored the levels a user has completed? So if the user ever returns, they will not have to start over?
Or if you use a platform like GitHub, Facebook, or Twitter, users can opt to choose light mode or dark mode. It would be great if the web pages can remember your personalized choices so you do not have to adjust them every single time you visit the site.
Luckily, developers have a few tools to make this happen: cookies, localStorage, and sessionStorage. Today, we are going to go over localStorage and sessionStorage.What are localStorage and sessionStorage?
localStorage and sessionStorage are very simple tools offered by the Web Storage API. This API allows web applications to store data in a user’s browser, without the use of servers or cookies.
With localStorage, a web application can store up to 10 megabytes of data for an extended period of time, defined by the developer. So if the user closes the browser window or tab, restarts the computer, or shuts the computer off, that data collected will continue to exist. That data will only be erased if the expiration date is hit, the browser cache is cleared, or the web app itself clears the data.
In contrast, sessionStorage can store up to 5 megabytes of data — and the data will only exist for as long as the tab is opened. Ergo, if you close the tab, even if the window is still alive, you will lose the data.Important Details You Need to Know
Before moving on to the actual implementation, it is important to emphasize this point:
localStorage and sessionStorage care about the browser you are using. They are saving data in your browser. Therfore if you acess the same website with different browsers, like Google Chrome and Mozilla Firefox, the website will not be accessing the same localStorage objects. Right? In other words, Firefox, for example, cannot access the data collected by the Google Chrome browser.
Also, while on the discussion of browsers, it is important to note that localStorage and sessionStorage are not compatible with every version of every browser. Check out compatibility on W3Schools.
Lastly, it is also imperative to understand that the data collected is shared among all the web pages that belong to a specific domain. Even if data was collected on the home page, for example, that data will be accessible by all the web pages that belong to that domain.Implementation
So the way that data is stored is with key-value pairs. Keys are essentially readable names that define the data and values are that data. For example, keys can be “name”, “age”, and “operating-system”. And the values, respectively, can be “Kyle”, “21”, and “Windows”. Of course, you can create any keys and values that you want. Just make sure the data you collect is meaningful and that it serves a purpose.
The sample code above offers three different ways to create entries of data — all of which are represented in key-value pairs. In this sample code, we are creating a key called “name” and giving it the value “Kyle”.
In the first two methods, we are using the function setItem() to create entries of data. In the first method of creating a data entry, we are passing variables to the functions. In the second method, we are passing string literals. Both work exactly the same way.
In the third method, we are not using the setItem() function. Here is the general format of how that looks like:
localStorage.keyName = keyValue;
So again, these three different methods will create data entries in the format of key-value pairs. However, the three methods above can do more than just create data entries. They can also update data entries.
This is what happens: When you create a data entry, you need a key. For example, let’s imagine your key was “name”. If the key already exists and has a value, it will simply overwrite the previous value. And if they key does not exist, it will simply create a new key-value pair.
Now, before moving on to reading data entries, we must quickly highlight the fact keys and values are strings. They cannot be integers, floats, booleans, or anything like that. They must be strings.
In the previous section, we talked about the setItem() function. Now, we have the getItem function. This function takes in one parameter which is the key, and it returns the value of the key.
In the example above, we want to get the value of the “name” key, and we store that value in the variable name. The sample code above shows two different ways we can approach that.
Here, we introduce the removeItem() function. The removeItem function takes in one parameter — which is the key. If the key exists, it will be removed.
In the second line of code, we are introducing another approach. We are using the delete operator to remove “name”. Again, this is allowed because localStorage is an object, “name” is a propety, and the delete operator is specifically meant to remove properties from an object. Read more about the delete operator on the MDN Web Docs.
And if you want to remove all the data entries, you can use:
Throughout this tutorial, it can be observed that all the examples use localStorage. If you want to use sessionStorage instead, simply swap out localStorage.
First, right click and hit Inspect.
Find the Application tab in the top panel.
On the left panel, under the Storage section, you should see “Local Storage” and “Session Storage”. Click on whichever one you used.
Save Data to Local Storage. localStorage.setItem(key, value);.
Read Data from Local Storage. let lastname = localStorage.getItem(key);.
Remove Data from Local Storage. localStorage.removeItem(key);.
Remove All (Clear Local Storage) localStorage.clear();.
Step 1 − Create HTML <a> element..
Step 2 − Get content to add to the text file..
Step 3 − Create a Blob object of the content..
Step 4 − In the href attribute of the <a> tag, add the blog object URL..
Step 5 − Add the default file name as a value of the 'download' attribute of <a> tag..
LocalStorage is a way of storing data permanently in the browser. Unlike setting a normal variable, it does not reset when you reload the page, and you can access the same localStorage data from any page on your website. LocalStorage is a key-value store, meaning that you store data with a key.