Steps for effectively deleting browsing history on Ionic

While testing my app on Chrome browser, I encountered an issue with clearing old views and cache. This is the process I followed to sign out of my app:

https://i.stack.imgur.com/EGgRx.png

Upon clicking Log out, the following code is executed:

   Auth.$signOut().then(function(){
        $ionicHistory.nextViewOptions({
                disableBack: true,
                historyRoot: true
        });
        $ionicHistory.clearHistory();
        $ionicHistory.clearCache();
        $state.go('login');
   });

Although this method works, when attempting to log in again from the login page, the following code runs:

$ionicHistory.nextViewOptions({
  disableBack: true
});
$ionicHistory.clearHistory();
$ionicHistory.clearCache();
$state.go("menu.myReports");

While this also works, the previous view before logging out is still visible:

https://i.stack.imgur.com/VtdeW.png

Instead, I want to completely clear all history, cache, or any other remnants upon signing out. Is this achievable? My database is using AngularFire.

Answer №1

Although this issue may seem outdated, for those arriving in 2017 or later, I will provide an explanation of what actually occurs and how to resolve it:

The $ionicHistory.clearCache() code snippet is as follows:

clearCache: function(stateIds) {
return $timeout(function() {
$ionicNavViewDelegate._instances.forEach(function(instance) {
instance.clearCache(stateIds);
});
});
},

It becomes evident that the method takes a parameter called stateIds, which is essentially an array of state names. This realization came after some confusion on my part initially.

Further delving into the topic, we encounter the code for $ionicNavView.clearCache used within the previous line "instance.clearCache(stateIds)":

self.clearCache = function(stateIds) {
var viewElements = $element.children();
var viewElement, viewScope, x, l, y, eleIdentifier;
for (x = 0, l = viewElements.length; x < l; x++) {
viewElement = viewElements.eq(x);

  if (stateIds) {
    eleIdentifier = viewElement.data(DATA_ELE_IDENTIFIER);

    for (y = 0; y < stateIds.length; y++) {
      if (eleIdentifier === stateIds[y]) {
        $ionicViewSwitcher.destroyViewEle(viewElement);
      }
    }
    continue;
  }

  if (navViewAttr(viewElement) == VIEW_STATUS_CACHED) {
    $ionicViewSwitcher.destroyViewEle(viewElement);

  } else if (navViewAttr(viewElement) == VIEW_STATUS_ACTIVE) {
    viewScope = viewElement.scope();
    viewScope && viewScope.$broadcast('$ionicView.clearCache');
  }

}
};

`

Upon analyzing the clearCache function, it is important to note that it does not indiscriminately clear all caches. Instead, it only destroys cached views matching values present in the stateIds array. In the absence of parameters, it simply eliminates the current view.

Consequently, the Ionic-recommended solution involves invoking $ionicHistory.clearCache() with an array containing all relevant state names as arguments.

For instance:

$ionicHistory.clearCache(['login', 'map', 'home']); I find it surprising that any Ionic developer overlooked this simple detail without diving into the code before. Hopefully, someone benefits from this insight, despite the delay.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing jQuery from removing child elements while inserting data through ajax

When I try to insert data into an HTML structure using the code below, only one of the elements displays at a time. It seems like when I use Ajax to insert data, the child elements are being removed. How can I prevent this without having to change the stru ...

I am looking to transmit information to the controller using AJAX

ajax console.log(total);//10 console.log(number);//4 var form = { total:total, number:number } $.ajax({ url: 'items/cart/update', type: 'POST', data:form }); Spring MVC controller @ResponseBody @P ...

Moving from the end to the beginning with a jQuery slider transition

Instead of relying on external plugins, I built this slider from scratch: function customSlider(selector, interval, index) { var slider = this; this.ind = index; this.selector = selector; this.slides = []; this.activeSlide = 0; this.amount; ...

When Vue.js Vuex state changes, the template with v-if does not automatically refresh

I have tried setting the v-if value in computed, data, passing it as props, and directly referencing state, but it never seems to re-render despite the fact that the state I am checking for is changed to true. Currently, I am directly referencing the stor ...

Conundrum regarding setting up configuration for express-session middleware in Express version 4.x

Hello, I'm currently diving into node.js and still trying to grasp the concept of configurations in sessions. Below is a basic example of how sessions are used in my app: app.js var express = require('express'); var bodyParser = require(&a ...

What is the best way to detect when an option is selected in a Material UI autocomplete component?

Utilizing the autocomplete feature with filterOptions to propose adding a new value: <Autocomplete multiple name="participant-tags" options={people} getOptionLabel={(option) => option.name} renderInput={(param ...

Display the page for 10 seconds continuously in a loop

I am currently developing a Node JS guessing game where data is collected on the back-end and sent to the front-end to start the game. The data consists of 10 levels, allowing the game to operate on a single page. Each level lasts for 10 seconds. Once the ...

The controller in my template is not being passed by the $routeProvider

I attempted to dynamically load a template in Angular using ngRoute... However, I encountered an issue with the following code: (app.js route configuration) app.config(function($routeProvider) { $routeProvider.when("/password", { templateUrl ...

What is the process for incorporating the !important declaration into a CSS-in-JS (JSS) class attribute?

I'm currently exploring the use of CSS-in-JS classes from this specific response in conjunction with a Material UI component within my React project. In order to override the CSS set by Bootstrap, I've decided to utilize the !important modifier. ...

What sets the Event and EventHandler apart from each other in terms of functionality?

I am posting this question to gain clarity on the fundamental distinctions and practical applications of the Event versus EvenHandler. ...

Error: The react render method is unable to determine the length of an undefined property

I created this component to extract the length of the followers array in order to display the number of followers each user has on their profile. The fetchUser() function is used to call a backend API, and I implemented Redux and Reselect for state managem ...

Accessing the ViewModel property of a parent component from the ViewModel of its child in Aurelia

Having a scenario with two distinct components: <parent-component type="permanent"> <div child-component></div> </parent-component> class ParentComponentCustomElement { @bindable public type: string = "permanent"; } clas ...

Node: effectively managing SQL scripts with dynamic variable replacement

My SQL statements have grown quite large, and I want to store them as separate files with syntax highlighting. The solution I found on StackOverflow is perfect for my needs. In my case, I write SQL queries in JavaScript using Template Literal syntax for v ...

Button within ng-switch statement

Issue with switch button inside switch statement, only functioning correctly outside of the switch statement. See below for my code: <div ng-controller="LoginController as LC"> <div ng-switch on="view.name"> <div ng-switch-de ...

Learn how to upload an image using Vue.js and then trigger a custom method

Greetings! I am a newcomer to Vue.js and I have encountered a problem that I need help with. In my component, there is a hidden input for files. When I click a button, the browser displays a window for importing files from my PC. Once I choose a file, I wa ...

What is the best way to implement a Navbar link in React.js?

I am currently working on developing a website using Reactjs. I have successfully created a Navbar with two links - Home and Contact. However, when I click on the Contact link, although the URL changes accordingly, the page itself does not update. I have s ...

Successive, Interrelated Delayed Invocations

There are two functions in my code, getStudentById(studentId) and getBookTitleById(bookId), which retrieve data through ajax calls. My ultimate goal is to use Deferreds in the following sequence: Retrieve the Student object, Then fetch the Book Title bas ...

Modify the value of a variable inside another {{variable}} (not sure what it's called)

I am looking to update the variable "prefs" to reflect either "easy, medium, or hard" options based on user interaction. For instance: THIS {{choice.prefs.title}} NEEDS TO BE UPDATED TO {{choice.easy.price}} or {{choice.medium.price}} or {{choice.hard. ...

Tips for reversing a sketch: Creating a timer where the text continuously refreshes causing it to intersect

Currently, I am working on developing a stopwatch that is functional. However, I am facing an issue where the text overlaps itself when it changes due to repetitive drawing. Removing the strokeText and fillText from the interval prevents it from changing a ...

Preventing state changes from affecting the rendering of a Material-UI table in a ReactJS application

Inside my app.js, the following code snippet defines a state: const [open,setOpen] = useState(false) This state is used to control whether a material-ui Alert should be displayed on screen for 3 seconds using this code: useEffect(()=>{ setTimeout( ...