CIS 136 Building Mobile Apps Storage CIS 136 Building Mobile Apps

Storage Options

Storage Options Many storage API’s Local Storage & session storage Simple storage technique using key/value pairs WebSQL (android, blackberry, iOS) full-featured database tables accessed via SQL queries IndexedDB (windows, blackberry) more features than LocalStorage but fewer than WebSQL Plug-in Based File Plug-In - allows you to cache data on the local file system Downloader Plug-In- Downloads files to persistent Storage SQLLite Plug-In- more storage and more flexibility than the standard Web SQL database

Local Storage

Local/Session Storage most basic storage option available allows you to store up to 5MB of data Unreliable Data can get wiped out use it where data loss is not an issue never use it to store sensitive data since it can be easily accessed

Local Storage Reasons we might want to store some data locally: The application is completely self contained and there is no interaction with other users, so all data can be stored locally Need to store data locally for some specific functionality like a “Remember Me” feature Skip unnecessary calls to a server by storing preference settings locally Skip unnecessary calls to a server by caching other data locally Sync online and offline data so that the user can continue using the application even when they are offline Evernote /Facebook

Local Storage a simple key-value system, using setters and getters localStorage.setItem('key', ‘value'); var someSetting = localStorage.getItem(‘key'); can only store strings to store an object or array, must convert it to a JSON string var myConvertedArray = JSON.stringify(array); to retrieve it later, decode JSON string back into an array or object var myDecodedArray = JSON.parse(myConvertedArray);

Local Storage vs Session Storage Permanent – localStorage() method Data is saved even when app is closed Temporary – sessionStorage() method Data is not saved when app is closed

Methods Works off of key/value pairs Set an item - Assigns a keyed item's value window.localStorage.setItem("key", "value"); Get a key - Returns the name of the key at the specified position var keyName = window.localStorage.key(0); Get an item - Returns the item identified by the specified key var value = window.localStorage.getItem("key"); Remove an item - Removes the item identified by the specified key Window.localStorage.removeItem("key"); Clear - Removes all of the key/value pairs Window.localStorage.clear();

<script> // Wait for device API libraries to load $(document).on("deviceready", onDeviceReady); //uses named function // device APIs are available function onDeviceReady() { window.localStorage.setItem(“hobby", “sailing"); var keyname = window.localStorage.key(0); // keyname is now = “hobby" var value = window.localStorage.getItem(“hobby"); // value is now = “sailing“ var value2 = window.localStorage.getItem(keyname); // value is now = “sailing" window.localStorage.removeItem(“hobby"); window.localStorage.setItem(“hobby2", “riding"); window.localStorage.clear(); // localStorage is now empty } </script>

IndexedDB

IndexedDB IndexedDB combines the strengths of the LocalStorage and WebSQL supports the storage of structured data rather than key/value pairs The basic pattern that IndexedDB encourages is the following: Create/Open a database Create/Open an object store in the database (similar to a table) Start a transaction and make a request to do some database operation, like adding or retrieving data. Wait for the operation to complete by listening for the event Do something with the results (which can be found on the request object).

Creating/Opening a Database When you open a database, you get a DB object, which provides error and success events, and properties such as result, error and readyState var db; var dbName = 'myDB'; var databaseVersion = 1 var openRequest = window.indexedDB.open(dbName [,databaseVersion]); openRequest.onerror = function (e) { console.log(e.target.errorCode); }; openRequest.onsuccess = function (event) { // Existing Database is open and initialized db = event.target.result; … NOTE: The database is created if a database with the specified name does not exist. Only a single version of a database can exist at a time. When a database is first created, its initial version is zero

New database When you create a new database or increase the version number of an existing database (by specifying a higher version number than you did previously, the onupgradeneeded event will be triggered

Creating a new object store function createObjectStore() { var openRequest = window.indexedDB.open(dbName, 2); openRequest.onerror = function(e) console.log("Database error: " + e.target.errorCode); }; openRequest.onupgradeneeded = function (evt) db = event.target.result; var employeeStore = db.createObjectStore("employees", {keyPath: "id"}); }

Indexes Can retrieve records in an object store using its key or indexed fields can have one or more indexes, and they can either be unique or non- unique function createIndex() { var openRequest = window.indexedDB.open(dbName, 2); openRequest.onsuccess = function(event) { db = event.target.result; }; openRequest.onupgradeneeded = function (evt) { var employeeStore = db.createObjectStore("employees", {keyPath: "id"}); employeeStore.createIndex("emailIndex", "email", { unique: true }); employeeStore.createIndex("zipCodeIndex", "zip_code", { unique: false }) }

Transactions Used to perform reading and writing operations on an object store Three modes:

Creating records Data is a string literal array var empData = [ { id: "444-44-4444", name: "Bill", zip: 35022, email: "bill@company.com" }, { id: "555-55-5555", name: “Dave", zip: 32034, email: "dave@home.org" }, ]; Store values in the newly created objectStore. var employeeStore = db.transaction(“employees“,”readwrite").objectStore(“employees"); empData.forEach(function(empRec) { employeeObjectStore.add(empRec); }

Retrieve a specific record using key function fetchEmployee() { var result = document.getElementById("result"); result.innerHTML = ""; if (db != null) { var txn = db.transaction(["employees“]) var objStore = txn. objectStore("employees"); var request = objStore.get("E3") request.onsuccess = function(event) var employee = request.result; if (employee == null) { result.value = "employee not found"; } else { var jsonStr = JSON.stringify(employee.id); result.innerHTML = jsonStr;

Delete A Database function deleteDatabase() { var deleteDbRequest = window.indexedDB.deleteDatabase(dbName); deleteDbRequest.onsuccess = function (event) { // database deleted successfully }; deleteDbRequest.onerror = function (e) { console.log("Database error: " + e.target.errorCode); }