Options for offline/local storage without a database for javascript app

Question

Here is my scenario:

I am familiar with Javascript and would like to create some simple apps to use at work either personally or as proofs of concepts to present before taking them further and getting actual web server space. I do not however want to setup an actual database on my machine. I would prefer, if possible, to read/write to a local JSON file. This is where I am a bit stuck as most of my queries have turned up old information prior to the html 5 FileSystem API or Node.js (already installed on my machine) or whatever else there may be now.

Does anyone know of a tutorial for creating an offline MVP with database-less storage or something similar? Or just general advice on what to look at to get started?

I have been reading the HTML 5 Filesystem API and Node.js FS stuff but without an example I am finding it quite difficult to know where to begin.

Answer 1

On April 24th, 2014 the W3C officially matured the FileSystem API to a Working Group Note and development with this technology should be done with caution, not certain if or how long it'll stick around.

The IndexedDB is looking to be a promising alternative/work-around, perhaps check out the html5 rocks tutorial instead. Left my initial answer below because it is still valid, but wanted to leave a word of caution about the File-System API.

---

I see you got an answer but I wanted to give a solution to the file-system api (which you also asked about) With cookies you have a size limitation, but to answer the other side of your question the following is the article I used to get started with the HTML5 File-system API

Everything else within the file-system api revolves around getting the reference to a file and then creating writers, readers, ect. specific for that file instance. Callback functions are passed/to be executed when file writers, readers, references have completed loading.

Requesting storage Quota/get a reference to the FileSystem

var onInitFs = function(fs){
    fileSystem = fs;//set global reference to the filesystem
};
var errorHandler = function(e){console.log('Error', e);};
navigator.webkitPersistentStorage.requestQuota(1024*1024*1024*5, function(grantedBytes) {
    window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); 
}, errorHandler);

Making a file

fileSystem.root.getFile("filepathtoJSON", {
            create: true
}, callback, errorHandler);

Writing JSON to file

fileSystem.root.getFile("filepathtoJSON", {create: true}, function(fileEntry) {
        fileEntry.createWriter(function(writer) {
            writer.onwriteend = function(e) {
                writer.onwriteend = function(e){
                    callbackFunction();
                }
                writer.onerror = function(e3){console.log(e3);}
                var blob = new Blob([JSON.stringify(targetJSONobj)]);
                writer.write(blob);
            };
            writer.onerror = function(e3) {console.log(e3);};
            writer.truncate(0);
        }, errorHandler);
   }, errorHandler);

Reading JSON from a file/creating a fileReader(pass JSON object in a callback function)

fileSystem.root.getFile("filepathtoJSON", {creation:false}, function(fileEntry){
        fileEntry.file(function(file){
            var reader = new FileReader();
            reader.onloadend = function(e) {
               callback(JSON.parse(this.result));
            };
            reader.readAsText(file);
        }, errorHandler)
    }, errorHandler);

Answer 2

You could write it yourself by turning the object to a string and storing as a cookie or using local storage:

var data = { 'example': 324324 };
document.cookie = JSON.stringify(data);
var loaded = document.cookie.split(';');
console.log(JSON.parse(loaded [0]));

Or alternatively use a library which will do it for you!

http://brian.io/lawnchair/