Javascript – Storing data offline with javascript

javascriptweb-development

My question is about storing data offline and potentially whether I will need to bring in an outside programmer or could this be learned within a few weeks?

The website I am working on will have an interface where users will login and go through a series of quizzes in the form of checkbox, drop down menus, and others. Each page/quiz area could have 20-100 total checkboxes in a series of 3-5 rows because of the comprehensive nature of course.

This I can do – I know how to code the quiz and return a correct or incorrect answer based on each individual checkbox and present a cumulative score (ie: you got 57% correct).

The issue lies in the fact that I would like to save the users results and keep them informed of their progress. When they complete all of the quizzes, I would like to have a visual output of their performance in each area. Storing the output from their results offline is where I think I may run into a problem with my lack of coding experience. I would also like to have a sidebar with their progress of each section (10-15) with a green percentage completion bar or a % correct which would draw from this.

I have never had to code something that stores information like this offline – so back to my question – would it be better to learn the language needed or bring in a coder/developer for the back end stuff.

Best Answer

Its very easy and you can learn it in like an hour or so tops.

you can also consider using some library like this

http://www.jstorage.info/

I am using it for one of my project.

Related Solutions

Unique Identifiers – Generating Secure IDs for Offline Web Apps

Your approach will work. A lot of document management systems use this type of approach.

One thing to consider is that you don't need to use both the user uuid and the random item id as part of the string. You can instead hash the concatination of both. This will give you a shorter identifier, and possibly some other benefits because the resultant id's will be more evenly distributed (better balanced for indexing, and file storage if you are storing files based on their uuid).

Another option you have is to generate just a temporary uuid for each item. Then when you do connect and post them to the server, the server generates (guaranteed) uuid's for each item and returns that to you. You then update your local copy.

JavaScript – How to Handle Multiple API Calls Using jQuery

That should be pretty easy, considering this is the way JavaScript HTTP requests work by default!

Unless you specifically tell XMLHttpRequest(or jQuery's $.ajax or one of it's wrappers) to be synchronous, it'll run at asynchronous mode. That means you give it a callback function, it sends the request, and then continue in the code. Only when the response returns the callback gets invoked with it - that can happen long after the JavaScript event that sent the request ended.

So, what you simply need to do is(shown in jQuery for simplicity, but the concept for pure JS is the same):

$.ajax({
        type: 'POST',//or 'GET'
        url: 'first_api_url',
        data: {/*first_api_data*/}
}).done(function(data){
        //Data contains the results from the first API.
        //Use them to update the DOM.
});

$.ajax({
        type: 'POST',//or 'GET'
        url: 'second_api_url',
        data: {/*second_api_data*/}
}).done(function(data){
        //Data contains the results from the second API
        //Use them to update the DOM.
});

P.S. - you shouldn't count about the second call being sent before the first call's response returns. If the first call's response returns really really fast, it might interrupt in the middle. It's probably depends on the JavaScript implementation, and it's probably not going to happen in this particular code when the second call is immediately after the first, but I've encountered a nasty bug where AJAX calls return too fast and uses things before they're initialized.

Related Topic