Basic examples

Remember.js is made to stay modern and works with all HTML5 elements, whilst retaining support for older browsers too

<input type="email" data-remember> <input type="number" data-remember> <input type="range" data-remember> <input type="color" data-remember> <input type="date" data-remember> <textarea data-remember></textarea>

You can set the default value of an element by simply setting it's value on page load

<input type="text" value="This is the default value" data-remember> 1 2 (Default) 3 <select data-remember>
<option>1</option>
<option selected>2 (Default)</option>
<option>3</option>
</select> <input type="checkbox" checked data-remember>
<input type="checkbox" data-remember>
<input type="radio" name="radios[]" data-remember>
<input type="radio" name="radios[]" data-remember>
<input type="radio" name="radios[]" checked data-remember>

Going beyond input and select

Remember.js isn't just made for form elements, using the javascript api you can specify any element to be saved.

Here's a very basic example using a list of items specified by the user, but this can be expanded on greatly.

The shopping list is registered to remember.js using the following code:

var options = {
    get: function(){ return this.element.innerHTML },
    set: function(val){ return this.element.innerHTML = val },
    reset: function(){ return this.element.innerHTML = this.def },
    def: "<li>Milk</li><li>Bread</li>"
};
var list = document.getElementById("list");
new remember.Control(list, options);

Autosaving and more

Remember.js also contains a method called remember.change() that allows you to specify a function to call whenever any element is changed (even elements that don't support onchange())

A few uses of this are shown below.

· Magic save button

The following code only shows the save button once something has changed.

remember.change(function(){
    document.getElementById("save").style.display = "";
});

Enable magic save button

· Autosaving

This code enables autosaving. ie Whenever an element is changed, it's value is saved instantly.

remember.change(remember.save);

Enable autosaving