0

I have a really big angularjs web application which loads large files when you first enter the site. The site is composed by a few SPAs, and every time the user change from one to the other this data is lost and has to be loaded again. Also, if the user presses refresh the data is also loaded again.

This data will very unlikely change during the user's session, so it would be great if we could persist it and reload only when there's an update. I know about local and session storage, but they have a 5000k or 10000k limit, which won´t be enough. I would need aroung 20000k storage.

Is there any way to do that?

David
  • 3,364
  • 10
  • 41
  • 84
  • 1
    thats an outrageous amount of static data to have in memory for a site application.. You could look into relational DB's through async calls but you're still going to make calls to populate it.. To be honest it sounds like your system is badly engineered.. Or its not clear what you're trying to achieve.. There might be other options – Pogrindis May 19 '15 at 09:44
  • 1
    If you load the data via a single http request, the request will be cached by the client. Will this meet your needs. Your URL could be something like /getdate/ so its NEW for each session. from the docs When the cache is enabled, $http stores the response from the server in the specified cache. The next time the same request is made, the response is served from the cache without sending a request to the server. – Steve Drake May 19 '15 at 09:47
  • @Pogrindis that limit will probably never be used and our needs will probably about 7 or 8000k, but still it's too much for session storage; it's a very large web with tons of info, so it really is an outrageous amount of data – David May 19 '15 at 09:53
  • @SteveDrake I'm not really concerned about the http request as this will be cached by the client as you said, the problem is the processing of the data, which might take some time – David May 19 '15 at 09:54

3 Answers3

1

We had the same issue a couple of months ago and found no valid solution. We used two work arounds:

  1. Use one SPA (put the various SPAs in a Super SPA) . We had the chance to do so. Don' know if that is an option for you. The module ui-router which routes using state instead of urls might be helpful.

  2. We used paginated data to reduce the size of initial loads.

If you need this huge amount of data to compute e.g. statistics in the browser or rendering graphics, consider to move this computation to the backend.

You can also use the http service to load the data and cache it. But this is only an option, if the data is not changed while the session is active.

Peter Paul Kiefer
  • 2,114
  • 1
  • 11
  • 16
  • Thanks, @PeterPaulKiefer, I can´t move this to the server, this data is used just for visualization. I'll look into ui-router, but I'm afraid that still leaves the problem of the refresh, which could be quite common in out web as it displays real time information. – David May 19 '15 at 10:00
  • Sorry, I think you misunderstood me. The ui-router is only helfull is you put all SPAs in a super SPA. It does not give you the possibility of caching data. But there is another idea. Is it possible to open new Browserwindows for the individual SPAs and switch between them? – Peter Paul Kiefer May 19 '15 at 10:04
1

Yes and no. You can use server side code to inject javascript to your page in many different ways, so you will not have to make a ajax request to the server to get the data. For example if you use php you can do something like

<?php
  $script =  "<script> var Data = $data;</script>";
  echo $script;
?>

Then inside your control do something like

$scope.data = Data;

But browser is not built to handle big data at once. If your data is bigger than 5MB you are going to have a very bad user experience and your app will crash. So instead you should organize your data in a way that all of your data aggregation will be handled at the server side and you will send small package to the client.

Ariel Henryson
  • 1,316
  • 1
  • 10
  • 13
0

Maybe you can create a service that uses $http to load the data asynchronously and set the cache parameter to true, as explained here: How to cache an http get service in angularjs

Community
  • 1
  • 1
Michael Pearson
  • 584
  • 1
  • 4
  • 10