remember-input

Remember form inputs even after a page refresh.

Demo

demo

⚙ Installation

Basic

CDN

Add script right before closing </body> tag, and initialize plugin:

  <script src="https://cdn.jsdelivr.net/npm/remember-input@1.0.0/dist/remember-input.min.js"></script>
  
  <script>
    Remember.init();
  </script>

Using Node Package Manager (NPM)

Install remember-input package:

npm install remember-input --save

Import package and initialize:

import Remember from 'remember-input'

 Remember.init()

🤔 How to use it?

Add class remember-input to the form element

<!-- Make sure each input has a unique name attribute -->
  <form class="remember-input">
        <input type="text" name="firstname" />
        <input type="checkbox" name="agree" />
        <button type="submit">Submit</submit>
  </form>

Initialize plugin:

Remember.init();
// You can also pass an optional settings object
// below listed default settings
Remember.init({
  // Global settings:
  selector: "remember-input" // class applied to form elements
  storeTrigger: "change" // Event that trigger input saving "change, keyup, keydown"
  clearOnSubmit: false // Clear the stored data when form is submitted
  handleSubmit: false // if true plugin will handle form submission via the onsubmit function
  onSubmit: function (e, data, callback) {} // handles form submission
  exclude: [] // name attributes to be excluded from storage
  disabled: false // disable plugin
});

🌟 Examples

Handle form submission with plugin:

To handle form submission with plugin set handleSubmit option in settings to true and define an onSubmit function. This function has access to the event, data and callback passed down to it. event: The submit event. data: The form information stored in local storage and returned as json object. callback: callback function to eventually submit the form.

Remember.init({
  clearOnSubmit: true,
  handleSubmit: true,
  onSubmit: function (e, data, callback) {
      // Do what u want here
      
      callback(); // to eventually submit the form
  }
});

Exclude input field:

You can exclude input field whose value you don't want to remember eg passwords, card information

Remember.init({
  exclude: ['password', 'card']
});

Caveats

setting: storeTrigger

keyup and keydown settings option for storeTrigger may not trigger saving for some input elements like radio or checkbox.

❔Questions

If you found a bug, have a question or an idea, please check Remember-input contribution guide and don't hesitate to create new issues.