JSFiddle - React, Tailwind, and code Playground

by Shanid

HTML

<form id="localStorageForm" class="localStorageForm" method="post" action="">

        <div class="input-fields">
          <label>First name:</label>
          <input type="text" name="fname" id="fname" class="text" value="" />
        </div>

        <div class="input-fields">
          <label>Last name:</label>
          <input type="text" name="lname" id="lname" class="text" value="" />
        </div>

        <div class="input-fields">
          <label>Email:</label>
          <input type="email" name="email" id="email" class="text" value="" />
        </div>

        <div class="input-fields">
          <label>Message:</label>
          <textarea name="message" id="message" class="text"></textarea>
        </div>

        <div class="buttons">
          <input type="submit" class="button" value="Submit" />
        </div>

      </form>

JavaScript

function storeValues() {

    if (localStorage["fname"]) {
        $('#fname').val(localStorage["fname"]);
    }

    if (localStorage["lname"]) {
        $('#lname').val(localStorage["lname"]);
    }

    if (localStorage["email"]) {
        $('#email').val(localStorage["email"]);
    }

    if (localStorage["message"]) {
        $('#message').val(localStorage["message"]);
    }
}

storeValues();

// $('.text').keyup(function () {
//     localStorage[$(this).attr('name')] = $(this).val();
// });

$('#localStorageForm').submit(function() {
    $('.text').each(function() {
        localStorage[$(this).attr('name')] = $(this).val();
    });
});