9/4/2017 - 5:21 PM

Local Storage Example

Local Storage Example

<!DOCTYPE html>

<html lang="en-us">


    <meta charset="UTF-8">
    <title>Local Storage Example</title>


    #input-name, #greeting {
      font-weight: 700;
      font-size: 2em;


    <!-- Title -->
    <h1>Guest Book</h1>
    <!-- Input Form -->

      <span id="input-name">
        Your Name: <input id="your-name" type="text">
        <input id="save-name" value="Save" type="submit">

    <!-- Print Name -->
    <span id="greeting"></span>

    <!-- jQuery -->
    <script src=""></script>

    <!-- Script -->

    // When users click "save-name"
    $("#save-name").on("click", function(event) {
      // This line prevents the page from refreshing when a user hits "enter".

      // Clear the HTML from the greeting header

      // Grab the user input
      var username = $("#your-name").val().trim();

      // Clear absolutely everything stored in localStorage using localStorage.clear()

      // Store the username into localStorage using "localStorage.setItem"
      localStorage.setItem("name", username);

      // And display that name for the user using "localStorage.getItem"


    // By default (upon load) show the name stored in localStorage using "localStorage.getItem"