As a user, I would like my data to persistently track totals between page refreshes, so that I can keep track of the aggregate number of votes.
Implement local storage into your current application
Make sure the data persists across both browser refreshes and resets
Hints:
Store the products array into local storage as a formatted JSON string
Retrieve the products array from local storage and then utilize the JSON.Parse() function. Remember, if your constructor utilizes prototype methods, you will have to send each item in the array back through the constructor function.
Run a Lighthouse Accessability report. Make necessary updates to your application based on the report to get your score above 80.
Local Storage
localStorage - 2 methods
objects are not strings so need to convert objects to strings
const header = document.getElementById("greeting");
const input = document.getElementById("nameInput");
const form = document.getElementById("nameForm");
form.addEventListener("submit", handleSubmit);
input.addEventListener("change", handleChange);
let state = {};
function init() {
// let name = localStorage.getItem("personsName"); // could be a name or null or undefined
// let changes = Number(localStorage.getItem("numChanges"));
// let state = {
// name: localStorage.getItem("personsName"),
// changes: Number(localStorage.getItem("numChanges"))
// };
// Initially this is undefined
// Reads from local storage as a string
let stateString = localStorage.getItem("state") || "";
// Converts to an object
state = JSON.parse(stateString);
// Confirms
console.log("Read the state", state);
}
function handleSubmit(e) {
e.preventDefault();
e.target.reset();
}
function handleChange(e) {
state.name = e.target.value;
++state.changes;
// State is an object
// Need to convert to a string so we can save it.
console.log(state);
console.log(JSON.stringify(state));
localStorage.setItem("state", JSON.stringify(state));
// One by one (old) way
// localStorage.setItem("personsName", state.name);
// localStorage.setItem("numChanges", ++state.changes);
renderGreeting();
}
function renderGreeting() {
if(state.name) { header.textContent = `Hello, ${state.name}` }
}
// What we type in doesn't survive a re-render
// All of the JS is in "memory" only for as long as the page is open
// Wouldn't it be cool if it said Hello to us on page load?
init();
renderGreeting();
const header = document.getElementById("greeting");
const input = document.getElementById("nameInput");
const form = document.getElementById("nameForm");
form.addEventListener("submit", handleSubmit);
input.addEventListener("change", handleChange);
let state = {};
function init() {
// let name = localStorage.getItem("personsName"); // could be a name or null or undefined
// let changes = Number(localStorage.getItem("numChanges"));
// let state = {
// name: localStorage.getItem("personsName"),
// changes: Number(localStorage.getItem("numChanges"))
// };
// Initially this is undefined
// Reads from local storage as a string
let stateString = localStorage.getItem("state") || "";
// Converts to an object
state = JSON.parse(stateString);
// Confirms
console.log("Read the state", state);
}
function handleSubmit(e) {
e.preventDefault();
e.target.reset();
}
function handleChange(e) {
state.name = e.target.value;
++state.changes;
// State is an object
// Need to convert to a string so we can save it.
console.log(state);
console.log(JSON.stringify(state));
localStorage.setItem("state", JSON.stringify(state));
// One by one (old) way
// localStorage.setItem("personsName", state.name);
// localStorage.setItem("numChanges", ++state.changes);
renderGreeting();
}
function renderGreeting() {
if(state.name) { header.textContent = `Hello, ${state.name}` }
}
// What we type in doesn't survive a re-render
// All of the JS is in "memory" only for as long as the page is open
// Wouldn't it be cool if it said Hello to us on page load?
init();
renderGreeting();
What is JSON?
What is data persistence?
What is local storage?
Where is local storage stored?
Bookmark and Review: The Past, Present, and Future of Local Storage for Web Applications
Statement on why this topic matter as it relates to what I’m studying in this module:
Local Storage offers a way to store and retrieve data without relying solely on server-side technologies so it can create a seamless use experience by allowing faster reload.
JSON.stringify() method to convert objects or arrays to JSON strings before storing them in local storage. To convert the stored JSON string back to the original object or array, the JSON.parse() method is used.I don’t know if this is outside of our scope and more for the OPS people but do we have to take into consideration of the people who can exploit local storage data?
Here are two articles that will help you understand the science behind the fear and approaches to take when feeling anxious about presenting:
Try these 10 tips to reduce your stage fright:
Use Charismatic Verbal Tactics:
Warm-Up Right:
Use the Sparkline Structure:
Avoid Caveats and Apologies:
Master Nonverbal Behavior:
Channel Your Fear:
Work the Stage:
Master Stage Presence:
Include the Audience:
Move People Emotionally:
Solve a Problem:
Utilize Stories:
Use an App:
Rehearse Thoroughly:
Adopt a Laughing Mindset:
Learn from the Best:
Write about two things that you will implement to improve your anxiety when giving a presentation.
Write a brief reflection on your learning today, or use the prompt below to get started.
Sometimes, something is easier to learn than we expected it to be. Sometimes, something is more difficult to learn than we expected it to be. Briefly write about an experience with each extreme that you have had in this course.