Oops.js library to prevent form data loss in the following cases: Refresh the page; Close the browser tab; Close the browser. This JavaScript library is designed to prevent data loss in certain unexpected situations like leaving/refreshing the page or closing the browser.
The JavaScript library stores the form values that a user fills in Web Storage (local storage or session storage) and the form automatically refills on the next visit.
storage property
The Web Storage engine to use can be localStorage or sessionStorage.
sessionstorage
It only stores data for one session, which means that the data is stored until the browser or tab is closed.
localstorage
Stores data without an expiration date and is only released through JavaScript, or by clearing locally stored data/browser cache.
Must Read: JavaScript Library Stores Form Data in Local Storage | form-storage
How to make use of it:
1. Insert the Oops.js JavaScript library into the document.
<script src="oops.min.js"></script>
2. Initialize the Oops.js and begin monitoring adjustments in your HTML form.
var ps = new Oops(); ps.start();
3. Add the data-oops to the form fields that want to prevent information loss.
<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 information on the form submission.
var submitButton = document.getElementById("submit");
submitButton.addEventListener("click",function(){
ps.clear();
});Available methods
.start(); Initializes the tracker.
.clear(); Clears the stored data.
Must Read: A Simple Todo List Using jQuery and Bootstrap with LocalStorage
Protection
Be careful when using the data-oops attribute on fields where sensitive data, such as passwords, will be listed. For Oops, keep your data in the form it stores that data in the browser, and is easily accessible.
See Demo And Download
Official Website(pedro-jmanuel): Click Here
This superior jQuery/javascript plugin is developed by pedro-jmanuel. For extra Advanced usage, please go to the official website.
