I have built this chrome extension for our internal portal. There is a form in this portal with just one textarea as an input. Users generally post a set of strings in that form. So my extension stores those values on submit locally and displays the history of commands a user has posted in the form in reverse chronological order.
What I currently do is store each command as a value and current timestamp as key into localStorage. If the user posts same data twice, both are stored as 2 different key value pairs. On each load of the page, I retrieve all the keys from localStorage in an array, sort the array in reverse chronological order. Then iterate through the array again to create another array with objects of key value pair. Then I display them in DOM nodes as history of input commands.
Now this is a very inefficient method, a better way would be to store all the key value pairs in a single JSON.stringifyed string. And whenever user posts same input twice, then the previous value of timestamp should be overwritten for the same command. In short, same command should not be stored twice.
There are two ways of doing that. THAT'S WHERE I NEED HELP.
1st method: Make a single object, with keys as the command and values as current timestamp. Say:
var command = $('textarea').val();
var storageTank = JSON.parse(localStorage["MyTank"]);
storageTank[command] = new Date().getTime();
localStorage["MyTank"] = JSON.stringify(storageTank);
So my storageTank looks like
{
"run": 1331916048253,
"stop": 1331916049963,
"modify":1331916086324,
"delete": 1331916099874
//and so on... Remember there can be as much as 1000 to 1500 of such commands,
//some of them very large
}
Now my data is stored as an unordered dictionary. Whenever (mostly onload) I need to display them in (reverse) chronological order I will have to make an array of objects, each object containing a key (command) and query (timestamp) and sort it.
Like this [{"run": 1331916048253},{"stop": 1331916049963},{"modify":1331916086324},{"delete": 1331916099874}]
2nd method: I store the commands in an array of objects containing just one property and simply use push,pop and reverse for the sake of maintaining chronology. Like
var command = $('textarea').val();
var entity = {};
entity[command] = new Date().getTime();
var storageTank = JSON.parse(localStorage["MyTank"]);
storageTank.push(entity);
localStorage["MyTank"] = JSON.stringify(storageTank);
Now my storage Tank looks like this
[
{"run": 1331916048253},
{"stop": 1331916049963},
{"modify":1331916086324},
{"delete": 1331916099874}
]
Now I don't need to sort them every time I want to display or in other words, on each page load (which occurs very frequently since the form submission redirects on the same page). But if before saving each command, I will need to first iterate through the array to check weather the same command already exists and overwrite if it does, and that will happen on form submission, that means until this matter is sorted out, the form will not submit.
Now which way will be more efficient.
Thanks in advance.
