JavaScript Tutorial: Mapping ES6 arrays with HTML5 Local Storage

This is an HTML5/JavaScript tutorial and is intended to teach users what HTML5 local storage is, why it is useful, and how to use it. Many developer and coder workflow tips are covered as well.

Demo code gist on GitHub: ehd-tutorial-html5-localstorage.js

Here is the code we produce in the video:

console.clear();

localStorage.clear();

// Declare arrays
var people = [
    "Juan", "Julia", "Paulo", "Francisco", "Xiao", "Tran", "Amy"
];

var countries = [
    "Colombia", "USA", "Brazil", "Spain", "China", "Vietnam", "USA"
];

console.log("%c                                           ", "background:orange");

// Loop through people and store key-value pairs in local storage
for (var j = 0; j < people.length; ++j) {
    
    var key = people[j];
    console.log("person" + j + ": " + key);
 
    var value = countries[j];
    console.log("country" + j + ": " + value);

    localStorage.setItem(key, value);
    
}

console.log("%c               RESULTS                    ", "background:pink");


// Get all key-value pairs from local storage
for (var i = 0; i < localStorage.length; ++i) {
    
    var key = localStorage.key(i);
    var item = localStorage.getItem(key);
    console.log(key + " => " + item);
    
}

If you found this video tutorial helpful, please leave a comment below! 🙂

HAVE AN IDEA FOR A VIDEO?

I love sharing my knowledge with others, and by sharinging and communicating in a loving way, we all grow! If you have any ideas, suggestions, or questions, leave a comment below. If I make a video from one of your suggestions, you will get a shout out on the video.