jQuery Cookbook

Chapter 17. Using jQuery in Large Projects

Rob Burns

Introduction

jQuery is often used to add small user interface enhancements to a website. However, for larger, more complex web applications, jQuery is also quite useful. The sample recipes throughout this chapter show how jQuery can be used to address the needs of more substantial and interactive web content. The first three recipes explore different methods of persisting data in a web browser. These are followed by a look at easing the use of Ajax and JavaScript as the quantity of code and data in your application grows.

17.1. Using Client-Side Storage

Problem

You are writing a rich Internet application that processes nontrivial amounts of user data in the web browser. Motivated by the desire to cache this data for performance reasons or to enable offline use of your application, you need to store data on the client.

Solution

A simple to-do list will be used to illustrate storing data on the client. As with many of the recipes in this chapter, a jQuery plugin will be used to handle browser inconsistencies:

<!DOCTYPE html> <html><head> <title>17.1 - Using Client-Side Storage</title> <script type="text/javascript" src="../../jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.jstore-all.js"></script> </head> <body> <h1>17.1 - Using Client-Side Storage</h1> <p>Storage engine: <span id="storage-engine"></span></p> <input id="task-input"></input> <input id="task-add" type="submit" value="Add task"></input> <input id="list-clear" ...