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:
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:
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.
We can access local storage by using window.localStorage. The following code shows the most important methods exposed by the returned Storage object:
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:
We need to use the window.openDatabase() method for creating or opening a database:
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.
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:
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.
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.
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:
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.