HTML5 offline caching database storage

Question

Im working on an HTML5 offline app im using a json string as my database

 [
            {"id":"1","data":"a","group_name":"erwr"},
            {"id":"2","data":"b","group_name":"dasd"},                        
            {"id":"3","data":"c","group_name":"yjg"},         
             -------------------------------
             -------------------------------
                 // it has around 3000 elements
    ]

Is it a good idea to store this entire json in a variable and assign like

var mydatabase = "the above json";
localStorage.setItem('mydb', JSON.stringify(mydatabase ));

I think there are some limitations with the maximum number of characters for a var in javascript.so that the possibility of missing some elements in the json.

Another alternative that im using is put the entire thing in a hidden div

<div id="db" style="display:none">/**the above json**/</div>

and accessing like

var mydb = $('#db').html();
localStorage.setItem('mydb',mydb);

My question is that the second method an optimal one ? if not someone please provide another optimal way.

Answer 1

The localStoage method is fine. Most browsers support at least 5 MB for localStorage and your data rows look small. There is no fixed limit on Javascript variable size.

Putting it in a hidden <div> will slow down initial page load.