Instantly share code, notes, and snippets.

Embed
What would you like to do?
Eric Hepperle Designs Tutorial: Demonstrates basic usage for HTML5 localStorage using ES6 JavaScript.
/*
Program Name: Console: Tutorial Code - HTML5 Local Storage (Simple Example)
File Name: ehCode_2018.06.26_JavaScriptES6_Demo_HTML5LocalStorage_01.js
Date Created: 06/26/18
Date Modified: --
Version: 1.0
Programmer: Eric Hepperle
Purpose: Uses vanilla ES6 JavaScript to demonstrate HTML5 Local Storage.
Outputs:
N/A
Usage: In a browser console copy-paste the code below
into the console and hit "Enter" to run.
Sample results:
N/A
Requires:
* Browser console.
* Basic knowledge of vanilla JavaScript
Demonstrates:
- ES6
- Vanilla JavaScript
- Array Mapping
- HTML5 (advanced)
- Local Storage
*/
/* global $ */
/*jshint esversion: 6 */
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);
}
/*
NOTES:
06/26/18 - Created file as part of video tutorial.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment