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

Is it possible to load modal content using ajax bootstrap pagination without having to refresh the main page?

Whenever I utilize the bootstrap modal and pagination for modal content, clicking the next/prev button causes the entire page, including the main window, to reload. Here are the scripting lines: $("#ajax_process_page").html("<%= escape_javascript(rend ...

Receiving a JSON object in response after sending data to a server using JavaScript

I am facing an issue with passing an email and password on login click to a database using PHP. After testing the email and password combination, PHP sends back a JSON object. While I have verified that the PHP code is functioning correctly and returns a J ...

Is there a way to combine several WAV audio blobs into one cohesive file?

Issue I'm Facing: I am attempting to combine multiple blob audio files into a single blob and then download it on the page. My Attempts So Far: I have tried to merge the Audio blobs using the following methods: Method - 1: const url = window.URL.c ...

Changing the website address | Node.js | Express

Is there a way to redirect incoming requests to different endpoints depending on a query parameter in the request? For instance, http://localhost:9000/?category=xyz&param1=...&param2=... The category value can be any of [abc, ijk, pqr, xyz]. Gi ...

Determining in Express.js whether headers have been sent or not

As I develop a library that involves setting headers, I aim to provide a personalized error message in case the headers have already been sent. Rather than simply letting it fail with the default "Can't set headers after they are sent" message from No ...

Executing asynchronous functions in Angular using ng-click

Within my web application, I am utilizing an ng-table that displays a large number of rows per page (up to 1000). One of the features is a select-all checkbox that triggers an ng-change function to mark each table row as selected. However, the execution ...

What is the method for retrieving the fixed information?

I am currently working on a project that involves creating a course-rating API. We have been given a completed angular application to work with, and our task is to set up the routes without making any changes to the Angular app. One of the initial tasks a ...

Attach the element to the bottom of the viewport without obstructing the rest of the page

My challenge is to create a button that sticks to the bottom of the viewport and is wider than its parent element. This image illustrates what I am trying to achieve: https://i.stack.imgur.com/rJVvJ.png The issue arises when the viewport height is shorte ...

Updating components in Angular4 when route changesHow to update components on route

How can I ensure my component updates when the route changes? Here is the code for my component : import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ListService } from '.. ...

Hiding Div with JavaScript (Quick and Easy)

Hey there, I'm looking to make regStart and regPage alternate visibility based on a click event. I'm still getting the hang of JavaScript so any simple answers would be appreciated. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

What is the syntax for invoking a function within a nested function in TypeScript?

Is there a way to call the function func2 from within the sample function of function func1? Any suggestions on how to achieve that? class A { public func1() { let sample = function() { //call func2... but ...

Retrieve the XML file from the webpage and save it to a specific directory using Java and the Selenium framework with the Chrome browser

Retrieve xml file from the website and save it to a specific location using java or selenium with Chrome browser. Here is the snippet of HTML code: <!-- Start of Code which handles XML Download--> <a href="javascript:downloadXML()"> <img s ...

What is the integration process of using Font Awesome with React?

After installing react-create-app using npm, I also added react-fontawesome. Now, I'm wondering how to include the css styles of fontawesome in my project? Here is a glimpse of my work space: https://i.stack.imgur.com/pM1g1.png ...

Encountering difficulties when trying to display a nested object with two levels of depth using

I am currently developing an application where I need to display a nested object with two levels using the map method. The data structure is as follows: const categories = [ { catName: "Education", subCategory: [ { subCatName: "Col ...

Design an element that stretches across two navigation bars

Currently, I have implemented two Navbars on my website as shown in the image below: https://i.stack.imgur.com/4QmyW.png I am now looking to include a banner that clearly indicates that this site is a test site. In addition, I would like to incorporate a ...

Listen for the load event during an AJAX request without using jQuery's add

I have four HTML files and four corresponding JavaScript files. Each JavaScript file is externally loaded by its respective HTML file. Specifically, index.html loads javascript.js, 1.html loads javascript1.js, 2.html loads javascript2.js, and 3.html loads ...

inconsistent firing of mousedown events

On my webpage, I am using the following JavaScript code: $("#attach-body").mousedown(function (event) { //alert(event.button); switch (event.button) { case 2: event.preventDefault(); event.stopPropagation(); break; default: ...

Sinon.js: How to create a mock for an object initialized with the new keyword

Here is the code that I am working with: var async = require('async'), util = require('util'); var Parse = require('parse/node'); function signup(userInfo, callback) { var username = userInfo.username, email ...

Incorporating list items in a React component is not functioning as expected

When I console.log(this.props), here are my props: list:Array(1): {user: "Jack Nicholson", userid: "5b684ed8d3eb1972b6e04d32", socket: "1c0-Jb-kxe6kzPbPAAAD"} However, despite mapping through my list and using the component <UserItem user={user.user} ...

Updating the background color using typescript

Before transitioning to angular development, I had experience working with vanilla Javascript. I encountered a challenge when trying to modify the css properties of specific elements using Typescript. Unfortunately, the traditional approach used in Javascr ...