Preferences Form Using HTML5 Local Storage, Drag And Drop And New Input Types
This demo incorporates the new Web Storage API, the Drag And Drop API, and finally, some new input types available to us. Using the form, the web page visitor can set font size, web page background color, font style and colour, and so forth. These settings make use of the new colour picker control, the range input, and drag and drop of web page elements. These settings are then stored ready for their next visit in Local Storage, happening client-side.
Introduction
HTML5 has several new input types for forms. These new features allow better input control and validation. The new input types are:
• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
All of these input types can be used now as they fallback to ordinary text fields in non-supporting browsers, and there is in any case, a myriad of Javascript fallback plug ins to replicate this functionality.
Range Input Type
On the demo web page of the demo website, the form uses this input type for adjusting the size of text, to be saved as a user preference for the look of the website:
<input id="textSize" value="1" type="range" min="1" max="18" step="1" onchange="printValue('textSize','right')"/>
Fallback:
There is no fallback in place in the demo web page as this is an example of how the browser displays this input without any JavaScript or HTML5 support. View the demo page in IE and you will simply see a text field, which is perfectly useable.
Color Input Type
On the demo web page, the form uses this input type for choosing the background colour of the web page, to be saved as a user preference.
<input type="color" id="colour" class="inputForm" autofocus="autofocus">
Fallback:
We detect if we need this in preferences.js:
if (!Modernizr.inputtypes.color) {
// Set up page element input for JQuery fallback solution
$(document).ready(initColorpicker);
}
We use scripts/plugins/colourPicker/colourPicker.js plug in to replicate a HTML5 colour control. The scripts can be found at:
Local Storage
On the demo web page the user can set various preferences and save them to Local Storage so that on return visits they are still set. The code can be found in scripts/myScripts/preferences.js.
The two functions of interest are:
function getLocalStorageItem(key) {
try {
var item = null;
item = window.localStorage.getItem(key);
} catch (e) {
alert("Settings could not be retrieved : " + e);
return null;
}
if (item == undefined || item == null || item === "null" || item.length === 0) return null;
return item;
}
function setLocalStorageItem(key, value) {
try {
// Store this colour value in local storage
window.localStorage.setItem(key, value);
} catch (e) {
alert("Settings could not be saved : " + e);
return;
}
}
These set and get the data as key value pairs.
For storing user preference settings across sessions we use the localStorage object, using JavaScript to add and remove items, as key value pairs. Items stored are specific to the browser used to open the client, and so if the player opens the client in another browser his previous browser settings will not take effect. These values only exist for the domain the application is hosted on.
Local storage is supported on the following browsers:
Chrome 5+
Firefox 3.5+
Safari 4+
IE8+
Opera 10.5+
IOS
Android browsers
The max quota for data in local storage is 5mbytes, and this is per origin (domain) not per application. If this is exceeded when trying to set an item, a QUOTA_EXCEEDED_ERR exception is thrown.
The preferences form on the demo page also makes use of the HTML5 color picker control, and range input.
Please Note: Using Chrome Developer Tools means that you can easily see what is currently in Local Storage on the device you are developing on.
Fallback Solution
If not supported we use scripts/plugins/localStorage/jquery.Storage.js. This library can be found at:
Drag And Drop
In the demo it is possible to set user preferences, such as website background colour. This form employs the HTML5 Drag And Drop API to select a coloured square and drag it to the drop area, which then sets that colour into Local Storage, and sets CSS to change the background colour of the web page. The script for this can be found in scripts/myScripts/dragAndDrop.js.
Basically we get a reference to a <div> and add the following listeners to it:
onDragStart(e) {
e.dataTransfer.effectAllowed = "copy";
e.dataTransfer.setData("Text", e.target.style.backgroundColor);
}
function onDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Required
}
e.dataTransfer.dropEffect = "copy";
return false;
}
function onDrop(e) {
e.target.style.backgroundColor = e.dataTransfer.getData("Text");
colorChosen = e.target.style.backgroundColor;
return false;
}
function onDragEnter(e) {
dragColour = e.target.style.backgroundColor;
e.target.style.backgroundColor = "#e0e0e0";
return false;
}
function onDragLeave(e) {
e.target.style.background;
}
Fallback Solution
If we detect that this feature is unsupported, we fallback to the script that uses JQuery instead to achieve this functionality: scripts/myScripts/jQueryDragAndDrop.js.
Published on 24 March 2014 in HTML5 Features