Search code examples
angularjsjsonperformanceinternet-explorersession-storage

Basic charting application: session storage, client side DB or JSON object in model?


I'm looking to validate my approach, and I have some questions too.

I'm working on an AngularJS application that displays charts: Bar, Line etc. The data is in a SQL database. The data is segregated into metrics, each metric will be displayed in a chart. In the DB, each metric has its own table. Tables average 5,000 - 20,000 rows.

Because the chart is supposed to be dynamic, i.e. change time frame of metric, change location of metric, drill down location, etc, I'd like to pull the entire table data at load, then just query and filter inside the Angular app to update the chat. The project client is okay with a slower load time at start, but they don't want a slow load every time they make a change on the chart. (Government project, so internet connection is slow, and existing product queries DB with every chart change. Also because its a government project, IE is the primary browser and must be supported)

This is my first project pulling large JSON objects and so I'm trying to sort out the info as best I can.

It appears that I have three main options:

  • Get the JSON object and just let it sit in the model.
  • Use some form of session storage
  • Use a local storage option

The data does not need to persist, so I don't think there is a need for local storage, and I am weary about pulling several tables worth of JSON and just letting it sit in the model of the application. So session storage seems to be the route I should take. I've come across TaffyDB, which sounds like something that might work.

Q: From the project as described, does a client-side, session mini DB solution sound like the correct approach?

Q What type of storage limits am I up against? I've seen a number floating around like 10 MB (IE).

Q What do I not know about session storage, or client-DB implementations that I wish I did know?


Solution

  • After working on the project design and refining the requirements more, the solution that I went with was to create an application that generates dynamic SQL queries and only returns the result sets to the Angular application. By returning only the result set, the space requirement was greatly reduced. Client side persistence is managed by ngStorage which directs local and session storage. It is still up against the browser memory limit, but by storing only result sets, the issue is mitigated.