Prevent Data Loss In The Form By Refreshing Page | oops.js

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.


It only stores data for one session, which means that the data is stored until the browser or tab is closed.


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();

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">

4. Clear stored information on the form submission.

var submitButton = document.getElementById("submit");

Available methods

.start(); Initializes the tracker.

.clear(); Clears the stored data.

Must Read: A Simple Todo List Using jQuery and Bootstrap with LocalStorage


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.

Related Posts


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Product Thumbnail Slider With Positive Zoom Effect jQuery

Positive Zoom is a JavaScript library for creating an image gallery where you can zoom in on the current image by hovering over it. Must Read: Pure…


Create Responsive Gauge Meter Using Pure CSS | CSSGauge

Pure CSS Gauge Meter Component, no SVG, or artboard is used in this component. This component can be easily distinguished by overriding the default style rules and…


Versatile Date and Time Picker Calendar for Bulma

Bulma extension for calendar display can be used on a page as a large calendar with appointments or as a date picker/popup window. A responsive, customizable, and…


Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library

Pixl chart library displays time series charts in the browser, using the HTML5 Canvas element. It is designed to be lightweight and efficient, while still providing a…


Neumorphic Design Inspiration Style CSS Shapes | Neumorphism

Multi-dimensional design is inspired by the physical world and adds textures, reflection, shadows, layers, and depths to the flat design making the UI elements more visible. CSS…