Persistence with localStorage

Today

forms
data persistence
localStorage
building a simple web app with forms and localStorage
Final project

Forms

Use basic HTML

<!DOCTYPE html>
<html>
<body>

<h2>Display an Image as the Submit button</h2>

<form action="/action_page.php">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that activated the image button.</p>

</body>
</html>

adapted from w3schools

Intro to LocalStorage

LocalStorage is a property of a browser’s window interface. It is specific to an individual browser, and data is persistent across browser sessions.

All data stored in LocalStorage is saved as a string.

The format for storing data:

localStorage.setItem("name","Celine");

To get/load data:

let currentName = localStorage.getItem("name");

To clear data:

localStorage.clear();

Note: that if you load in a “private browsing” or “incognito” session the data will clear when you close the window/tab. Certain privacy extensions could also potentially clear the data.

<!DOCTYPE html>
<html>
<body>

<h1>The Window Object</h1>
<h2>The localStorage Property</h2>

<p><button onclick="clickCounter()" type="button">Click me!</button></p>

<p>Number of clicks:</p>
<p id="demo"></p>

<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>

<script>
clickCounter(); //run our function on load

function clickCounter() {
  if (localStorage.clickcount) { //check it exists
    localStorage.clickcount = Number(localStorage.clickcount)+1;
  } else { //otherwise start at 1
    localStorage.clickcount = 1;
  }
  document.getElementById("demo").innerHTML = localStorage.clickcount;
}
</script>

</body>
</html>

example from w3schools

Additional info from Mozilla Resources for Developers

label element

<label>

Working with forms

Use a form to collect user input.

w3schools forms tutorials
example code on Glitch

More advanced localStorage example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Save data in localStorage using JavaScript</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <form id="note-form">
      <input id="note-input" type="text" placeholder="+ Add Note" required />
      <button id="note-submit">Save</button>
    </form>
    <ul id="notes"></ul>
    <script>
      let noteForm = document.getElementById("note-form");
      let noteInput = document.getElementById("note-input");
      let noteSubmit = document.getElementById("note-submit");
      let notes = document.getElementById("notes");

      let notesStorage = localStorage.getItem("notes")
        ? JSON.parse(localStorage.getItem("notes"))
        : [];

      noteForm.addEventListener("submit", (e) => {
        e.preventDefault();
        notesStorage.push(noteInput.value);
        localStorage.setItem("notes", JSON.stringify(notesStorage));
        listBuilder(noteInput.value);
        noteInput.value = "";
      });

      let listBuilder = (text) => {
        const note = document.createElement("li");
        note.innerHTML = text + ' <button onclick="deleteNote(this)">x</button>';
        notes.appendChild(note);
      };

      let getNotes = JSON.parse(localStorage.getItem("notes"));
      getNotes.forEach((note) => {
        listBuilder(note);
      });

      let deleteNote = (btn) => {
        let el = btn.parentNode;
        const index = [...el.parentElement.children].indexOf(el);
        notesStorage.splice(index, 1);
        localStorage.setItem("notes", JSON.stringify(notesStorage));
        el.remove();
      };
      </script>
  </body>
</html>

adapted from w3collective

Final Project

This semester we have built websites for our class, false or misleading institutional websites, personalized clock programs, custom web extensions that modify the browser, an experimental weather web application.

We’ve covered ‘frontend’ programming including HTML, CSS and Javascript, modifying the DOM, as well as working with servers on the backend, creating and deploying node-based web applications with interaction, data persistence and data/API queries.

For this assignment you will make a custom web application, either your own idea, or building further from a project we worked on this semester.

Goals:

the site should be responsive - it must work well on the desktop and mobile browsers
the site should have interactive elements - you will want to use javascript
the design should be compelling and unique - no cookie cutter sites. Question what the site is, the conventions of such sites, and make it your own!
the site should be well-executed and original
Consider how/if your site works with data and APIs.
the site should use data persistence with localStorage

Final projects must be uploaded to the web by Wednesday May 15 at noon. We will have a series of smaller steps to accomplish leading up to that.

Homework

Project proposal and initial scaffolding setup (HTML page, CSS page, Javascript)