Input Store jQuery Plugin

A jQuery plugin that allows you to define cookie-stored input fields so that a user's previous information is stored upon input.

Getting Started

  1. You can download the full javascript file here or the minified version here.
  2. You can reference the latest jquery file on this website by using the following script tag:
    <script src="https://inputstore.netlify.com/inputStore.jquery.min.js"></script>
  3. Requires jQuery proper (2.0+) to operate

Example 1 - Defaults

Given the following HTML input field:

<input id="example1" type="text" name="example1field"></input>

and the following javascript initialization code:

$("#example1").inputStore();

You will get the following working example form input:

By default this input field will store the values as cookies when they are entered into the browser for 365 days. The cookie name default's to the input field name. In this case it defaults to example1field.

Example 2 - With Configuration

Given the following HTML input field:

<input id="example2" type="text" name="example2field"></input>

and the following javascript initialization code:

$("#example2").inputStore({
    name: "CustomOptions",
    expire: 120,
    debug: true
});

You will get the following working example form input:

This code snippet overrides the current defaults.

  1. It uses the cookie name CustomOptions rather than the input name of example2field.
  2. It settings the expiry to 120 days instead of the default 365 days.
  3. It enables debug which shows you what the cookie stored value is and the newly stored values are in the javascript console.

All Form Block Examples

1. Text Input Blocks


<input id="inputBlock" type="text" name="inputBlock"></input>
$("#inputBlock").inputStore();

2. Number Input Blocks


<input id="numberBlock" type="number" name="numberBlock"></input>
$("#numberBlock").inputStore();

3. Check Box Blocks


<input id="checkboxBlock" type="checkbox" name="checkboxBlock"></input>
$("#checkboxBlock").inputStore();

4. Select Blocks


<select id="selectBlock" name="selectBlock">
    <option value="OptionA">Option A</option>
    <option value="OptionB">Option B</option>
    <option value="OptionC">Option C</option>
</select>
$("#selectBlock").inputStore();

5. Text Area Blocks


<textarea id="textareaBlock" name="textareaBlock"></textarea>
$("#textareaBlock").inputStore();