Ionic Cache Clearing [Ionic V1]

ionic-v1
1

Hi everyone,

Can you please help me. I have searched high and low regarding this problem and i am unable to find a perfect solution for this.

My problem.

Say I have 3 views.

  1. Home - which has a really long text. So when a user scrolls to the middle and navigates to another page and when he comes back the scroll position needs to be maintained. So caching is enabled.

  2. A list page - list of something which has an infinite load function to load more items.

  3. A detail page for the list item - Click on an item from the list and this page will be shown with the detail vew of item.

My Problem and Question.

All views have caching enabled. I cant disable it because i need to maintain the scroll position.

List view- detail view - back to list view - now when i navigate again to detail view. I want to clear the cache delete the old caches(i mean the html elements) of the detail view ( but not the others pages )

I tried ionic clearchache and clear history. the problem is clearcache alone is not deleting the html. the cached html is still there. when doing clear history, the elements also get removed but the problem is, all the views are reset.

How to handle this scenario.
I want to remove a single view’s cached data and html before entering that view.

The above example is just to explain my situation, the application i am working on is a bit more complicated.

Any help is much appreciated.

Thanks in advance.

2

Are you using ionic version 1? If that was the case, I think there are 2 ways to set a page to be cache optionally

1st option :

.state('home.lounge', {
        url: '/lounge',
        cache: true,
        views: {
            'lounge-home': {
                templateUrl: 'lounge.html',
                controller: 'LoungeCtrl'
            }
        }
    })

2nd option:

put it inside ion-view tag view-cache=“false" or view-cache=“true"

3

Hi @anicacute09 , I am using Ionic V1. I know how to set cache. The issue is how to clear cache for one particular view. And view-cache=“false" is not possible. because i want to clear the cache based on a condition. so i need to clear cache of say view 1 from view 4 when a condition is met. Thank you.

4

i think can use it like this:

$timeout(function () {
     $ionicHistory.clearCache();
 }, 1000);
5

@anicacute09.

Sorry that doesn’t work. Already tried a lot of possible fixes. If you inspect using dev tools, you can still find the cached html elements even after doing this. Also this does not reload the controller for some reason.

6

maybe something is off with your code and if you want to reload the page you can use window.location.reload(true);

7

@anicacute09 I have one doubt.

$timeout(function () {
     $ionicHistory.clearCache(['view3']);
 }, 1000);

say i called clearCache from view 1, shouldn’t it clear the cache of view 3 and when I navigate to view3, shouldn’t it reload as well automatically. Or do i need to handle the reloading manually myself?

8

i think there are so many ways to cache or reload a page. I found out another way around while using state.go. You can search it all about from angularjs documentation.

ex:

$state.go($state.current, {}, {reload: true});
9

Hi @anicacute09,

By reloading a page. I mean also to reload the controller.

$state.go($state.current, {}, {reload: true});

The above does reload the page. But that has to be called from within that page.

{reload: true}, this doesn’t reload the controller.

I want to “clear the cache and reload a page”. This has to happen before I enter that particular page.

Once the page is loaded there is no point in reloading again.

I really appreciate that you are trying to help me. But i don’t think you understand my scenario explained in my question.

Sorry, my English is not that good.

$ionicHistory.clearCache(['upcoming.startlist']).then(function () {
    $state.go('upcoming.startlist', { raceId: event.live_id }, { reload: true });
});

The above code should reload the view/controller “upcoming.startlist” right. But it is not happening.