Cordova Storage
A large number of data is generated while designing any app. This data is needed for future use in the app. So, we require a particular storage area to keep this useful data safely. Cordova offers several storage APIs for storing the data. To increase the usage of an app, it is beneficial for the user to use an app when the user is offline. This storage APIs can also improve the performance of an app.
Here, we are defining various storage APIs that consists of some advantages and disadvantages. You can use any API as the basis of your needs. Furthermore, for different purposes, we can also use several different approaches within a single application.
First of all, we will discuss about the local storage:
Local Storage:
Almost all of the mobile application will need to store data in a local storage because you want to store data in the particular place from where you can easily retrieve them. So, local storage is a better place to store your useful data.
HTML5 introduced new options to store the data locally. We can use the HTML5 storage combined with various mechanisms offered by the plugins.
It offers a simple, synchronous key/value pair storage. Local Storage is supported by the WebView implementations to all platforms of Cordova.
The reason behind using Local Storage:
Here, we have defined some reasons for storing the data in a local storage:
- The application is completely self-contained. Not any interaction is done with other users, so all the available data can be stored in a local storage.
- It should be noted that for some specific functionality like the “Remember Me” feature, we must require to store the data in a local storage.
- By storing the preference settings locally, we can skip unnecessary calls to a server.
- By caching other data locally, we can skip unnecessary calls to a server.
- By using a local storage, we can also sync online and offline data, by which a user can continue using the application even when they are offline like Evernote.
We can define the local storage as the most basic storage option that can store up to 5MB worth of user data in the user’s browser.
Local storage is generally considered as a unreliable storage because it gets a bit of bad wrap. We can use the browsers local storage because it is reasonably stable and reliable and can be a viable option for the storage purpose. But, it is not applicable for a lot of applications. The reason behind that the data can be wiped out.
In general, local storage should be used only when data loss is not a big deal. It is not recommended to store sensitive data since it can be easily accessed.
Local storage might be a suitable option for the “Remember Me” type feature. Because if in case the data is lost, nothing will happen, we only require to enter the username and password again.
To cache data from a server, we can use a local storage because in case the data is lost, it can be fetched again from the server.
Take a look on the below code:
The above code is responsible for setting and retrieving the local storage data. It should be noted that few frameworks consist of their inbuilt ways for retrieving the local storage.
Note: Local storage can only store strings. We need to convert data into a JSON string, while storing an object or array in local storage. After retrieving the data, we can decode the JSON string back into an array or object back.
Usage Summary
We can access local storage by using window.localStorage. The following code shows the most important methods exposed by the returned Storage object:
Advantages
- It is supported by all the Cordova platforms.
- Because of simple and synchronous API, it is easy to use.
Disadvantages
- Complex data structures must be serialized because it only stores strings. Because of this, we can store only those data that can be serialized.
- Poor performance with a large amount of data. In particular: Limited amount of storage available (typically around 5MB).
- In the iOS platform, the data of local storage may be cleaned because it stores local storage data in the location that may be cleaned by the OS.
WebSQL
We can use Web SQL API for storing and querying the data using the SQL database. It can store 50-200 MB data. However, the exact limit depends on the platform. If the limit of storage has been reached, then the WebView will grant permission from the user to use more local space, if required.
You should have known that this API is not supported by all platforms but if you want to use it, you should have use the WebSQl Cordova Plugin.
It is supported by the underlying WebView on the following Cordova platforms:
Android
iOS
Usage Summary
We need to use the window.openDatabase() method for creating or opening a database:
Parameters:
name (string): Refers to the unique name of the database, that will be stored in the disk.
version (string): Defines the version of the database.
displayName (string): It provides a user-friendly name of the database. This name will be used while you need the description of your database to the user.
estimatedSize (number): It refers to a byte value which shows the expected maximum size of the database. We need to take the permission when the database size is increased.
IndexedDB
The IndexedDB combines the strength of the WebSQL APIs LocalStorage. It allows you to store arbitrary JavaScript objects, indexed with a key. It also offers some advantages of SQL tables for the benefit of a user, without restricting the structure or need to define it up front.
We can define IndexedDB as a simple data model like the LocalStorage. But we can create multiple databases instead of LocalStorage, in which multiple stores are available as per the database. Due to its search indexes and its asynchronous API, it offers better performance.
In short, IndexedDB:
- Is object-oriented
- Asynchronous storage and retrieval
- Offers key-value storage
Usage Summary
- IndexedDB is asynchronous storage where a user requests for a particular database operation, and the DOM event notifies the result.
You will get a request object when generating any request. This object offers two events i.e., onerror and onsuccess events, and various properties such as readyState, result, and error.
Plugin-Based Options
FileSystem API
If we talk about the FileSystem API, it is a W3C spec that is implemented from the Chrome browser. This API is responsible for storing and retrieving data on the local file system. The File plugin offers an extensive implementation across all the Cordova platforms.
SQLite Plugin
Now, the second plugin option is the SQLite plugin in which its consisting API is virtually identical to WebSQL. Differences among them are given below:
- Effectively no size limitations.
- It is available with the support of the Windows platform.
Following variations are available:
cordova-sqlite-storage – It provides supports for the Android, iOS & Windows platforms. Define the core version including sqlite3 implementation.
cordova-sqlite-ext – It is an extended version that consists of some additional features such as REGEXP support for iOS and Android.
cordova-sqlite-evfree – Same as the cordova-sqlite-ext with improved memory handling. It is available under commercial license GPL v3.