Local Storage with HTML5 and jQuery

Local Storage with HTML5 and jQuery HTML5 brings a whole host of new goodies to web design including the new local storage facility where data can be stored on the client where it is easily accessible. Cookies have been the only data storage mechanism on the client that the browser has access to for many years and although they have served us well in that time, they do have their limitations such as the constraints on their size and per-domain limitations.

Now we no longer have to worry about these issues and can work with local storage instead. Local storage has many benefits; in an application requires frequent access to stored data, reading or writing the data from or to their own computer is always going to be much faster than by sending AJAX requests to the server. We also have access to a much greater size (the draft specification recommends an arbitrary size of 5 megabytes) so we aren’t constrained to the limit of just 4 kilobytes that a cookie allows. In this tutorial we’ll create a simple document editor, it could be part of your blogging system for example, which will automatically save what is entered into the editor using local storage. We’ll cover how local storage objects are created, and how data can be stored to and read from the storage object. Getting First of all, set up a working folder called localstorage somewhere accessible on your computer. Ideally, this should be in a content-serving directory of a web server like Apache as some browsers do not work too well with local storage when running under file:// URLs. Within this folder create two more folders called js and css . Make sure a copy of the latest version of jQuery resides in the js folder. We’ll be using the jQuery lwrte (lightweight rich text editor) plugin, created by Andrey Gayvoronsky, to provide a rich text editor that will form the basis of our document creator. The actual plugin we use isn’t important, any other RTE plugin, or indeed a custom one of our own creation, could easily be used instead. The plugin can be downloaded from the project’s home on Google code: http://code.google.com/p/lwrte/downloads/list Once downloaded we should copy over the following lwrte source files to the js folder we created: • jquery.rte.js • jquery.rte.tb.js The second source file controls the toolbar; some of the buttons on the toolbar won’t work in our example because we’re more interested in the local storage aspect of the example as opposed to making a fully functional rich text editor, but using the default toolbar provided by the author is easier and quicker than building a custom one of our own. We should also copy the jquery.rte.css file and the images directory from the downloaded archive to our css directory.

Download Local Storage with HTML5 and jQuery pdf from www.dmxzone.com, 2 pages, 109211KB.