I'm trying to save some data to localStorage on my offline application. When user on offline mode, then browser will collect data from form, FormData object, store it to localStorage and when browser is online then it will push the FormData object that store in localStorage to server via jQuery ajax. The complexity is that the form have dynamic fields and can have the fileupload field and the problem is that the localStorage on html5 support data as string and not the object.
Collection.prototype.storeOfflineData = function(collectionId){
var formData = new FormData($('form')[0]);
pendingSites = {"collectionId" : collectionId, "formData" : formData};
window.localStorage.setItem("offlineSites", JSON.stringify(pendingSites));
Collection.prototype.goHome();
Collection.prototype.showErrorMessage("Successfully store data in offline.");
}
When the browser is online,connected to internet, I created the methods to read FormData from local storage and make ajax request to server but ajax request got error because the JSON.parse return "[object object]"
Collection.prototype.pushingPendingSites = function(){
pendingSites = JSON.parse(window.localStorage.getItem("offlineSites"));
if(pendingSites != null){
console.log(pendingSites[i]["formData"]);
Collection.prototype.ajaxCreateSite(pendingSites[i]["collectionId"], pendingSites[i]["formData"]);
}
}
Collection.prototype.ajaxCreateSite = function(collectionId, formData){
$.ajax({
url: '/mobile/collections/' + collectionId + '/sites', //Server script to process data
type: 'POST',
success: function(){
Collection.prototype.goHome();
Collection.prototype.showErrorMessage("Successfully saved.");
},
error: function(data){
Collection.prototype.showErrorMessage("Save new site failed!");
},
data: formData,
cache: false,
contentType: false,
processData: false
});
}