Store Form Data In Web Storage Until The Form Is Submitted – Oops.js

Preview:

Description:

Oops.js is a smart JavaScript library designed to prevent form data loss in certain unexpected situations such as leaving/refreshing the page or closing the browser.

The JavaScript library stores the form values filled by the user in the Web Storage (local storage or session storage) and automatically refill the form on the next visit.

How to use it:

1. Insert the Oops.js JavaScript library into the document.

<script src="oops.min.js"></script>

2. Initialize the Oops.js and start tracking changes in your HTML form.

var ps = new Oops();
ps.start();

3. Add the data-oops to the form fields that need to prevent data loss. Note that the library verifies that there has been a change in the DOM for elements with data-oops attributes. If there is a change it will clean the stored data.

<form action="">
  <input type="text" placeholder="Your Username" data-oops>
  <input type="url" placeholder="Your Website" data-oops>
  <input  type="email" placeholder="Your email">
</form>

4. Clear stored data on form submit.

var submitButton = document.getElementById("submit");
submitButton.addEventListener("click",function(){
  ps.clear();
});

5. Determine which type of web storage you want to use. Default: ‘localStorage’.

var ps = new Oops({
    storage: "sessionStorage",
    key: "my_key"
});