Client-Side Storage in Web Applications

More documents

Recommendations

Info

dardizing Gears features and APIs in HTML5 and associated APIs. The Gears projectstill remains as open source and is available athttp://code.google.com/p/gears/. In order to use Gears, Gears plug-inneeds to be installed to a web browser. However, the plug-in works only with old andodd browser/operating system combinations, and therefore its use cannot be recommended.Several high-level companies have used Gears as part of their products at somepoint, including Google’s GMail and Docs as well as MySpace.2.4 SummaryThis section gave an overview of the three legacy client-side storage mechanisms:HTTP cookie, Flash cookie, and (Google) Gears. In Table 1, the mechanisms arecompared against a set evaluation criteria to give a quick understanding and an overviewof their differences.Table 1. Comparison of legacy client-side storage mechanisms.Client-sidestorageStandardizationMainfeaturesSupporteddata typesStoragespaceBrowsersupportHTTP cookie IETF RFC 6265,StandardsTrack, April2011simple keyvaluepair datastring(including stringserializedJSON)4 kB per cookie,50 cookies perorigin (recommendation)all major browsersFlash cookie(Local SharedObject)proprietarybrowser plug-in(Adobe)alternative toHTTP cookies,accessible viaJavaScriptmany(Flash datatypes)100 kB perorigin(can be increased)all major browsersvia AdobeFlash Player 6+plug-in, excludingmobilebrowsers (Androidand iOSSafari)(Google) Gearsopen-sourcebrowser plug-in(BSD License)relational database(SQLite),uses a variant ofSQLmanyunlimited(SQLite limitations)deprecated (oldbrowser versionsvia Gearsplug-in)3 Revolution: The HTML5 ApproachThe W3C has specified three different API proposals for storing and manipulatingpersistent data on the client side: Web Storage [11], Web SQL Database [10], andIndexed Database API [17]. The motivation for creating the APIs was mainly fourfold:(1) standardize client-side storage access, (2) promote native browser support,(3) increase storage space, and (4) offer persistent data storage. Each API serves aspecific purpose, and therefore has a different approach and advantages. However, the4
common objective shared by all the APIs is to, one way or another, overcome thelimitations of legacy client-side storage mechanisms. In the following subsections,these three HTML5 client-side storage mechanisms are presented along with a briefsecurity analysis and feature comparison.3.1 Web StorageWeb Storage 4 [11], a W3C Candidate Recommendation since December 2011, isthe oldest and simplest of the three client-side storage APIs. It is a direct replacementto HTTP cookies and offers more advanced capabilities for storing small-sized data(e.g., session information or user preferences) on the client side through the use ofJavaScript.The API specification defines two mechanisms for storing and managing simplekey-value pair data. The first mechanism is designed for storing session-related(short-lived) data, i.e., the data disappears once the current session is terminated, suchas when a web browser or its tab is closed. The second mechanism is designed forstoring persistent (long-lived) data, i.e., the data remains available beyond the currentsession and is even available across multiple web browser tabs. For both mechanisms,the same API is used. The only difference is that the data is accessed through the sessionStorageand localStorage objects, respectively.Listing 1 shows a simple example of the API usage. In lines 1-5, data is defined inthe JSON format. Lines 7-9 demonstrate how to serialize the JSON data as string andstore it persistently with the given key into a local storage. Finally, the data is retrievedfrom the storage and converted back to JSON (cf. lines 11-13). In addition tostoring and retrieving data, the API provides means for removing and clearing datafrom the storage as well as for listening to storage events fired when changes occur inthe storage.1: // Define data2: var myData = {3: "code": "T-111.5502",4: "name": "Seminar on Media Technology B P"5: };6: ...7: // Store data8: localStorage.setItem( "1",9: JSON.stringify( myData, null, "\t" ) );10: ...11: // Retrieve data12: var myResult =13: JSON.parse( localStorage.getItem( "1" ) );Listing 1. The Web Storage syntax example for storing and retrieving data.4 Also referred to as DOM Storage, HTML5 Storage, Local Storage, and Offline Storage.5
Page 1 and 2: Client-Side Storage in Web Applicat
Page 3: 2.1 HTTP CookieHTTP cookie 1 [3], i
Page 7 and 8: 5: var myData = {6: "code": "T-111.
Page 9 and 10: 6: "code": "T-111.5502",7: "name":
Page 11 and 12: storage should be trusted, as a mal
Page 13 and 14: Silo was evaluated with multiple re

Client-Side Storage in Web Applications

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?