Skip to content

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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.