If you develop websites, or if you are trying to decide whether to write a native iOS app or a web app, you should learn about HTML5 client-side caching and storage.
No matter what kind of website you develop, you can use Safari's HTML5 client-side storage to make your work easier and improve your site. For example, you can:
Make your website work even when the user is offline or loses network connectivity by caching code and data locally.
Make your website more responsive by caching resources—including audio and video media—so they aren't reloaded from the web server each time a user visits your site.
Make your web app more user-friendly by saving user-generated data locally at frequent intervals, while reducing server load and delay by saving to your server only occasionally.
Make every user interaction with your site faster by replacing large cookies with local storage. (Cookies are sent back to your site with every HTTP request, increasing network overhead.)
Simplify your scripts by replacing unstructured data stored in cookies with structured key-value storage.
HTML5 client-side storage can make a web app nearly identical to a native app on iOS-based devices. Even without client-side storage, a web app can look and act much like an iOS native app—you can hide Safari’s UI so your web app uses the full screen, use CSS to rotate the view when the user flips the device between portrait and landscape modes, and provide an icon that launches your web app from the user’s start screen, just like a native app. When you add client-side storage to these other features, your web app comes very close to being a native app—the app is stored on the device, launched from the start screen, works when the user is offline, stores data locally, and looks and feels like a native app. Of course, there are still good reasons to write a native app and distribute it through the app store, but client-side storage puts web apps on a much more equal footing.
HTML5 client-side storage is supported in Safari on all platforms: Mac OS X, Windows, and iOS.
At a Glance
Use the Offline Application Cache to Make Your Website Usable Offline
To use the offline application cache, make a text file listing the resources of your website that you want to keep cached locally, then add an attribute to your HTML that identifies the list as a cache manifest. Safari loads the resources on the list into a cache that is dedicated to your domain; on subsequent visits to your website, the resources are loaded directly from the cache.
If the user is online, Safari compares the cached version of the manifest with the version on your website. If the manifest has changed, Safari checks each item on the manifest to see if the item has changed, then downloads any modified items. Items added to the manifest are automatically downloaded.
Lighten Your Cookie Load By Using Key-Value Storage
Most websites store data on the user's computer by setting cookies. Cookies are strings of unstructured data, typically limited to about 4 KB each. You can expand the limit by creating multiple cookies, but this too has restrictions; some browsers limit the number of cookies per domain, and—since all the cookies in your domain are returned to you with every HTTP request—the HTTP header size itself can become a limit.
There are two types of key-value storage: session storage and local storage. Session storage is local to a browser window and goes away when the user closes the browser window or loads a new site. Local storage is shared among all open windows and is persistent, even if the user clears all cookies.
Put data into storage by defining properties of the
sessionStorage objects. For example:
The previous snippet creates a key named "zip" with a value of "92104" and puts the key-value pair into local storage. Retrieving data is just as easy:
var userZip = localStorage.zip
Do the Heavy Lifting on the Client Instead of Your Server
When you have large amounts of data that the client needs to access in complex ways, the best approach is usually to create a relational database and provide client access using a GUI as a front end for SQL queries.
You can maintain a database on your server and use your website to provide a GUI to generate queries that your server executes, but this approach has some drawbacks:
User-generated data needs to be sent to and stored on your server.
The processing load for the SQL queries falls on your server, making it less responsive.
The global data set is potentially exposed to SQL hacking.
CREATE TABLE methods. Access the database using the
executeSql method, passing in SQL transaction strings.
Debug Client-Side Storage and Caching Using the Web Inspector
Use the Companion File
Click the Companion File button at the top of the HTML version of this document to download a
You may find the following documents helpful when working with caching and offline storage:
TicTacToe with HTML5 Offline Storage—Sample code containing a game that maintains the current game state persistently using local key-value storage.