Learning JavaScript? Topic - Local & Session Storage

Subscribe to my newsletter and never miss my upcoming articles

Hi 👋, back again with another topic on the Learning JavaScript series I am doing and this time I would be discussing Local and Session Storage with practical implementations.

Local Storage vs Session Storage

The difference between this two is that Local Storage data persist(continues to exsist ) in the browser until the user manually clears their cache while for Session Storage data only exsist until the browser is closed.

Both Local and Session Storage are part of the window object. It has methods namely getItem(), setItem(), clear() and removeItem() etc. In this part series we would be looking at how these work.

//The lines below sets the local storage to hold data for name and age
localStorage.setItem("name", "Omotola");
localStorage.setItem("age", 100);

//Retrieves data from localStorage
let name = localStorage.getItem("name")
console.log(name);

// At this point > Left Click in your broswer
//                    > Click on inspect 
//                    > Click on Application 
//                    > On the left hand side you would see Local storage 
//                    > Expand it and click to see your data stored

//To remove particular data 
localStorage.removeItem("name")
//To clear everything in storage 
localStorage.clear()

A usecase for Local Storage.

Whatever datatype that is stored in your local storage by default the browser saves it as a string. So to retrieve the data, it would need to be changed back to the usable datatype. A good usecase is giving your users the ability to bookmark an article on your blog so they can come back to it at a later date. On the blog bitsOfCode by Ire Aderinokun, a woman in tech I admire, this example is implemented where users can bookmark articles for a later date.

Untitled.png

When the user clicks on the bookmark button an object with the uri path and title is created and pushed to an array which is then stored in local storage under the key name articles. If the user clicks this bookmark again the article data is removed from storage. Brilliant! All other prerequisites being coded, the code for implementing this might look something like this.

localStorage.setItem

document.querySelector(".bookmark-button").addEventListener('click', function(e){
        //Gets the innerText of the H1 element
    const title = document.querySelector(".header-title").innerText;
    //Gets the baseURI and splits it using the delimiter / now the path value is path[3]
    const path = document.querySelector(".post__title").baseURI.split(/(?=\/)/);

    let articles;

    if(localStorage.getItem('articles') === null){
                articles = []
    }
    else{
        //Parsing because we need a JSON object to work with
        articles = JSON.parse(localStorage.getItem("articles"));
    }

        //JSON.strigify because data is stored as strings in local storage
    articles.push({path : path[3], title : title});

    localStorage.setItem("articles", JSON.stringify(articles));

})

In this code we can see that the bookmark-button is selected using the query selector and once the user clicks on the button the function is called which

  • Stores the value of the title and an array of the URI split by the delimiter that is "/" the Regex passed to string helps add the delimeter to the split strings
  • The code then checks if there is something with that keyname in local storage, if there isnt then the variable articles is set to an empty array. if there is then we parse the values in storage and assign it to the articles variable.
  • We then push the new article as an object with keys names path and tiles and assign them their respective values.
  • The array is then set back to localStorage with the new addition.

localStorage.getItem

I would be using localStorage.getItem to remove a single bookmarked article from our stored array of objects instead of localStorage.removeItem because what localStorage.removeItem will do is, it will remove the whole array and not a specific article. See example of localStorage.removeItem above.

So instead the code will look like this

//If the user clicks the bookmark button again 
document.querySelector(".saved").addEventListener('click', function(){

        const articles = JSON.parse(localStorage.getItem("articles"));

        const title = document.querySelector(".header-title").innerText;

        const newArticles = articles.filter(article => article.title !== title)

        //set the data in locaStorage.
        localStorage.setItem("articles", JSON.stringify(newArticles));

})

Here we have implemented what it would look like if the user tries to remove an article from localStorage.

  • First we load the articles from localStorage
  • Select the article you want to remove from localStorage
  • If the article name does not match the article title we selected earlier we want to save it in the newArray
  • The newArray with the remove article is then set in localStorage.

PS: If you thought about using the filter method instead of looping the array hi-5 ✋ you are learning!

If the user then navigates to the page where they can view all bookmarks the code to load this should look like this

document.addEventListener("DOMContentLoaded", getBookmarkArticles);
const bookmarkList = document.querySelector(".bookmark-list");

function getBookmarkArticles(){
    let articles;

    if(localStorage.getItem('articles') === null){
        articles = []
    }
    else{
        articles = JSON.parse(localStorage.getItem("articles"));
    }

    articles.forEach(function(article){
                const link = document.createElement("a");
                    const li = document.createElement("li");

                 li.className = "bookmark-item";
                     li.appendChild(document.createTextNode(article.title));

                     link.href = `https://bitsofco.de${article.path}`
             link.appendChild(li);

             //append child to the ul list 
             bookmarkList.appendChild(link);        
          })
}

localStorage.removeItem and localStorage.clear

And finally if the user wants to clear their bookmarks it is safer to use

document.querySelector("clear-bookmark").addEventListener("click", function(){
            localStorage.removeItem("articles");
})

than

document.querySelector("clear-bookmark").addEventListener("click", function(){
            localStorage.clear();
})

This is because the second example will compelely clear everything in localStorage. Great! Remember the same functions are available with session storage as well, they just expire once the browser is closed. A practical example of using sessions storage is saving a users login credentials during their session in the web browser tab. So instead of the user having to login again when they open another tab the session just persist

I hope this was helpful. Thank you! React to this post, or comment down below your thoughts I would like to hear from you.

If you have missed the other post in this series here is a link to them below

Learning JS? Hoisting

Learning JS? Higher Order Functions

Learning JS? Event Bubbling and Delegation

Peter Thaleikis's photo

Nice, thanks for sharing 🙌️

Omotola Shogunle's photo

No problem at all 😊

Jome Favourite's photo

I used localStorage once, while creating my portfolio following a blog post making a dark theme, but I don't understand JSON.parse and JSON.stringify. Explanation will be helpful..

Thanks for sharing!

Omotola Shogunle's photo

JSON.parse changes a string that is in JSON format to a JSON object while the other those the opposite

Bolaji Ayodeji's photo

I love this, thanks for sharing!