Develop Reference

Is IndexedDb dependent on cookie?

I am working on a prototype where we need to support offline data modification of web application, the application is expected to sync back the data when an internet connection is restored. I have taken a look at various HTML5 in-browser storage option and indexeddb looked like the one I wanted. But I am not sure if the data will be persisted between browser close. Is that possible? One more question if I delete the cookie of the browser, will data in indexedDb will be wiped out? My initial tests shows data gets deleted on cookie clear of browser.
If indexeddb is not a viable option, are there any other alternatives to it which can persist data when internet connection is not available?

As per specification database created with indexedDB should be persistent acrross navigation and browser session.
But current implementation is like persistent cookies. So removal of cookies might remove your database too.
As per google chrome indexedDB is a type of temporary storage.
Chrome: https://developer.chrome.com/apps/offline_storage
For microsoft & firefox it is persitent :
Microsoft: https://msdn.microsoft.com/en-in/hh563494.aspx
Firefox: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
Check supported browsers before use.
http://caniuse.com/#search=indexeddb

It isn't dependent on a cookie, though if you need to know who the user is (likely) you'll probably end up using a cookie of some variety...
As for offline sychronization... I thought about this a lot previously and created a project... The documentation for it is detailed and explains why and how... It may help, or at least give you things to think about. It has very recently been updated to support IndexedDB!
http://forbesmyester.github.io/SyncIt/index.html
In this space there is also RemoteStorage ( they were/are looking at using SyncIt + other bits in the project going forward ), Hood.ie and the commercial FireBase in this field.

Javascript to store value until cache is cleared?

I am using the following to save a random value in the local storage that will stay until the cache is cleared
localStorage['mkey1'] = Math.floor(Math.random()*801);
however when on mobile devices this does not work if the user closes the browser app, the cache is deleted. This of course is a result of the problem that the cookies in mobile devices are more like session cookies rather the desired expiration date I set to the cookie.
I have came across different sources like
https://danq.me/2012/04/24/visitor-tracking-without-cookies/
and
http://robertheaton.com/2014/01/20/cookieless-user-tracking-for-douchebags/
but I want to use plain Javascript, no Sinatra.

Local Storage should persist on all browsers until it is cleared, unless the browser doesn't support it; are you using a supported browser on the mobile devices you are testing? http://caniuse.com/#search=localstorage

A crazy but elegant solution to seamlessly update a hybrid app

I am using Phonegap to develop an mobile app.
Unlike web application, an mobile app is a static client which is updated less frequently than expected. Moreover, version management is required to maintain the dependency between server and client end.
I am thinking about a way to make the mobile app more like a pure browser. And here is a potential solution.
The initial index.html in Phonegap app gets the latest version from server and compares the version number cached in the browser/WebView;
If the current version is behind the latest, it fetches the remote homepage and replaces the whole html document and caches the latest version number;
Pros:
No more need to publish new version of mobile apps;
All platforms (mobile and web) use the latest version, no more manual update is required;
Cons:
Obvious delay when updating to new version, including the first launch;
All scripts and styles must be cached in localStorage to prevent browser from reloading these files unexpectedly.
I am sure some of you must have the same problem or idea. I will really appreciate if you share your thoughts here.

If the app is a tool, such as finding nearby restaurants or calling for a delivery service, I believe some pages with fixed layout and styling will do. The functions should rarely be changed, right?
For example, you can have a page showing a Google Map with markers attached to it, indicating all the nearby restaurants. Whenever there are changes to the list of restaurants saved on the server, the client does not require any modifications, as long as the functionality of this page is kept the same as usual.
Think of the homepage of Google. There is always a toolbar at the top, a Google Doodle and a search bar underneath. The layout is almost always the same. What differs is the Doodle which is dynamically loaded. Having a fixed layout should save you from updating your app client too frequently.
By the way, I usually don't update the apps on my mobile phone, as I am too lazy to do so. Therefore, I agree with you that it is better to publish new versions as few as possible.

I created a 1-way sync that updates my local web storage (SQLite) which is on just about every device these days. My sync updates my apps login/users it gets new updates from the db an updates my apps web storage.
You can use regular SQLite to write to your devices web storage that will only update when online.

storage space for mobile app using html and js

Okay, we talk and hear lot about creating mobile app using javascript and html. I was trying to write one app myself forgetting that some real programs also need to store and access at least, the information stored by the program. I intend to user only the browser of the mobile app and it is offline. Basically, it is just a program written using js. Since the browser is not allowed to create and store the data in the user's disk, how should I approach it? Storing the data in cookies is one of the option, I guess. I am new to web programming so please bear with me if I say something stupid. However, cookies can be inadvertently deleted.
So my question is: How can I manage a 'small storage space' in mobile device if I am using a html and js to create my app?

Web storage is supported by almost all modern browsers
http://caniuse.com/#feat=namevalue-storage
If you are looking for offline web applications, it is not supported from old Internet Explorer
http://caniuse.com/#feat=offline-apps
Here are a couple of useful links:
http://diveintohtml5.info/storage.html
http://diveintohtml5.info/offline.html

I believe all modern phones support LocalStorage.

In HTML5, there are a couple of ways to save information the way you want.
LocalStorage and WebDatabase
Although, if you want to do an App for iOS I recoment Web Apps, that allow you to create offline HTML application that the user see as a normal app.

LocalStorage limit on PhoneGap

There is usually a limit of 5MB on localStorage on browsers, including iPhone's Safari.
Since PhoneGap has the access higher security privileges including access to other storage mechanisms on the device, in theory they should be able to eliminate the limit of 5MB.
For example, it should be able to get around the usual restrictions by storing the data on a file, etc while keeping the API compatible with localStorage javascript object.
Is this done? Or is PhoneGap limited to the same 5MB?

PhoneGap doesn't do anything out of the ordinary to extend the default limits. On Android, I get 2.5M characters in localStorage (Strings in JavaScript are UTF-16).
You can find default limits for most browsers here: http://dev-test.nemikor.com/web-storage/support-test/
This was helpful in understanding the limitations, and I used the code to create a simplified test PhoneGap app.

PhoneGap has File API that should not be affected by browser local storage limits but don't know if there exist any abstraction to make it behave as HTML5 local storage "backend".

If you want to store a large amount of data you should not do that in localStorage, there are databases and files for that kind of need. localStorage is a key-value datastore, it's use is limited and it should not be "hacked" to fit all needs.

Localstorage is something which is provided by the browser.
Localstorage is not something which is available on a device, either a mobile phone or a desktop, that is leveraged by a browser.
Since it is something which the browser provides there is no way, we can change/increase it using Phonegap since your Phonegap app runs inside the browser.
If you want more storage space, you can use a technique which Phonegap can access like a file storage or SQlLite.