Suitable data structures for saving files in localStorage (HTML5) ?

Question

It is nice when there isn't a DB to maintain and users to authenticate. My professor has asked me to convert a recent research project of his that uses Bespin and calculates errors made by users in a code editor as part of his research.

The goal is to convert from MySQL to using HTML5 localStorage completely. Doesn't seem so hard to do, even though digging in his code might take some time.

Question:
I need to store files and state (last placement of cursor and active file). I have already done so by implementing the recommendations in another stackoverflow thread. But would like your input considering how to structure the content to use.

My current solution > Hashmap like solution with javascript objects:

files = {};
// later, saving
files[fileName] = data;

And then storing in localStorage using some recommendations

localStorage.setObject("files", files);
// Note that setObject(key, data) does not exist but is added
// using Storage.prototype.setObject = function() {...

Currently I'm also considering using some type of numeric id. So that names can be changed without any hassle renaming the key in the hashmap. What is your opinion on the way it is solved and would you do it any differently?

Answer 1

Currently I have decided after doing some reading and research that the best way to go is to store everything in objects using objects literals:

var files = {};
// Add loads of data

And then storing them using JSON.stringify():

localStorage.setItem('myFiles', JSON.stringify(files));

This makes good practice because it store large amounts of information that is easy to store and access. Also it prevents from getting confusing when to use the simple way of adding key-value pair information in localStorage and when to use the localStorage.setItem(key, value) function