Last active
October 8, 2018 17:39
-
-
Save codewizard13/a8b2633d62ff56972371102cf63c95bf to your computer and use it in GitHub Desktop.
Eric Hepperle Designs Tutorial: Demonstrates basic usage for HTML5 localStorage using ES6 JavaScript.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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