Html – iOS 7 webview and localStorage persistence

cordovahtmliosiphonelocal-storage

I'm developing a hybrid app (for iOS and Android only) using PhoneGap/Cordova and want to use HTML5 localStorage to store content for offline access.

http://caniuse.com/#search=localStorage says – "In iOS 5 & 6 localStorage data is stored in a location that may occasionally be cleared out by the OS."

What is the situation with an iOS 7 (and later) webview, in what cases will localStorage persist, or get cleared out (by the OS, or the user)?
Will an update to the app clear localStorage?
What about the user clearing browser history on Safari – will that apply to the webview too?
Do I need to worry (or can I even control) where on the fils system the localStorage is created. I understand it should not be backed up on iCloud.

I got a device (iPad) and checking the file system I see that localStorage file is in ~/Library/Caches within the app sandbox, see image below.

From the docs:

https://developer.apple.com/icloud/documentation/data-storage/index.html
Data that can be downloaded again or regenerated should be stored in the /Library/Caches directory. Examples of files you should put in the Caches directory include database cache files and downloadable content, such as that used by magazine, newspaper, and map applications.

I am simply doing this to set data:

  localStorage.setItem('foo','this is the FOO value');
  localStorage.setItem('bar','and this is the BAR value');

enter image description here

Best Solution

If you do still face the issue with Cordova-iOS v4 , then try the NativeStorage plugin. https://www.npmjs.com/package/cordova-plugin-nativestorage.

It has set, put and get functions which implement platform capabilities like android shared preferences and iOS NSUserDefaults which makes data store as safe as allowed.

cordova plugin add cordova-plugin-nativestorage

NativeStorage.putObject("reference_to_value",<object>, <success-callback>, <error-callback>);

NativeStorage.getObject("reference_to_value",<success-callback>, <error-callback>);

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Javascript – Storing Objects in HTML5 localStorage

Looking at the Apple, Mozilla and Mozilla again documentation, the functionality seems to be limited to handle only string key/value pairs.

A workaround can be to stringify your object before storing it, and later parse it when you retrieve it:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

Best Solution

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Javascript – Storing Objects in HTML5 localStorage

Related Question