continuousjs

A micro plugin to store and load values on change for continuous data usage on websites.

Usage no npm install needed!

<script type="module">
  import continuousjs from 'https://cdn.skypack.dev/continuousjs';
</script>

README

ContinousJs

Micro plugin to store (form) values on change

The basic thought behind this micro library is that a user shouldn't have only a good UX but also a continuous UX - meaning that inserted data should be continuous usable and stored. So this plugin enables you to do so easily.

Requirements

  • local storage

Advantages

  • ~ 2KB
  • without jQuery
  • easy-to-use

Usage

  1. Require script
<script type="text/javascript" src="./dist/cont.min.js"></script>
  1. Add Form & add on each element that should be "continuous" a data-cont attribute with the name of the property as value

e.g

<input type="text" name="username" data-cont="username" />
  1. Initialize lib
var cont = contJs({
    name: 'storage', // OPTIONAL (default: continuousUsage) - the name of the storage item in the local storage
    single: function (key, val) {}, // OPTIONAL - the callback called on every propery update simply injects name and value of property
    all: function (storage) {} // OPTIONAL - the callback called on every property update injects whole storage object
});

cont.reset(); // ADDITIONAL - reset the store to be empty and reload the value binding
cont.remove('property_name'); // ADDITIONAL - remove an property from the storage - NO RELOAD OF VALUE BINDING
    1. Change the referenced fields and reload the page & see how data stays :)

Info

  • password fields are NOT stored under no circumstanced even if the data-cont attribute is set, for security reasons.
  • the lib isn't necessarily limited to form element, if your element supports a oninput callback it also can be made continuous