Javascript 是否可以清除 Ionic 中的视图缓存？

Is it possible to clear the view cache in Ionic?

提问by Seer

I'm currently working on a Angular/Ionic/Cordova project and we've recently upgraded to the latest Ionic beta. From the version the project was using before, this introduced the view cache. It has also however introduced an issue in doing so.

我目前正在处理一个 Angular/Ionic/Cordova 项目，我们最近升级到了最新的 Ionic 测试版。从项目之前使用的版本开始，这引入了视图缓存。然而，这样做也带来了一个问题。

The application is customer-facing and is very data-centric. A user must authenticate to view data associated with their account, currently however; when a user logs out, and logs into another account, because the view(s) are still cached they are presented with the views of the last account.

该应用程序面向客户并且非常以数据为中心。但是，用户必须进行身份验证才能查看与其帐户关联的数据；当用户注销并登录到另一个帐户时，因为视图仍被缓存，它们会显示上一个帐户的视图。

The app should still cache the views when the user is logged in, as it helps make the app feel much quicker, but the cache should be purged when a user logs out.

当用户登录时，应用程序仍应缓存视图，因为它有助于使应用程序感觉更快，但应在用户注销时清除缓存。

Setting cache-view="false"is not an option, as it would completely disable the cache.

设置cache-view="false"不是一个选项，因为它会完全禁用缓存。

I've also tried setting $ionicConfig.views.maxCache(0);and then back to the default of 10 in the hopes that it would purge the cache in doing so, but it had no effect.

我也试过设置$ionicConfig.views.maxCache(0);然后回到默认值 10，希望这样做可以清除缓存，但没有效果。

The last thing I can think of to do is fire an event when a user logs in that refreshes all data that's currently loaded into the views - however, this would take a bit more effort than I feel it should.

我能想到的最后一件事是在用户登录时触发一个事件，刷新当前加载到视图中的所有数据 - 但是，这将比我认为应该花费更多的努力。

Is there a way to simply clear the view cache?

有没有办法简单地清除视图缓存？

回答by ABCD.ca

In the state definition in app.js you can add cache:falseto disable caching (See Disable cache within state providerin the Ionic docs. Or, you can keep caching except when you know data has changed.

在 app.js 中的状态定义中，您可以添加cache:false以禁用缓存（请参阅Ionic 文档中的禁用状态提供程序中的缓存。或者，您可以保持缓存，除非您知道数据已更改。

• If you're already on the page, you can do, $state.go($state.currentState, {}, {reload:true})
• If you're on another state and want to go back to the state that is normally cached but you want it to be refreshed, you can do, $ionicHistory.clearCache().then(function(){ $state.go('app.fooState') })

• 如果你已经在页面上，你可以这样做， $state.go($state.currentState, {}, {reload:true})
• 如果您处于另一个状态并且想要返回到通常缓存的状态但您希望它被刷新，您可以这样做， $ionicHistory.clearCache().then(function(){ $state.go('app.fooState') })

Note, the latter requires clearCache to return a promise. See the changes I made in this pull request and compare the implementation of clearCache that you have now with mine: https://github.com/driftyco/ionic/pull/3724

请注意，后者需要 clearCache 返回承诺。查看我在此拉取请求中所做的更改，并将您现在拥有的 clearCache 实现与我的进行比较：https: //github.com/driftyco/ionic/pull/3724

回答by Nirav Gandhi

I stumbled across a similar scenario where logging in with another user was showing me stale/cached view. You can do cache: falseat the state definition level but that entirely disables cache for that state in your app.

我偶然发现了一个类似的场景，在这个场景中，使用另一个用户登录时向我显示了陈旧/缓存的视图。您可以cache: false在状态定义级别执行此操作，但这会在您的应用程序中完全禁用该状态的缓存。

What you can rather do is clear all the cached view and history when user enters the signin/login state of your application (as you said). Seems ideal.

您可以做的是在用户进入应用程序的登录/登录状态时清除所有缓存的视图和历史记录（如您所说）。看起来很理想。

// code inside your signin controller

$scope.$on("$ionicView.enter", function () {
   $ionicHistory.clearCache();
   $ionicHistory.clearHistory();
});

回答by Nirav Gandhi

You can also do it by setting cache:falsein your $stateProvider:

您也可以通过cache:false在您的设置中做到这一点$stateProvider：

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

回答by Andoni Martín

Are you searching for something like this?:

你在寻找这样的东西吗？：

$ionicHistory.clearCache();

EDIT:

编辑：

There is an issue in Ionic's github: Issue

Ionic 的 github 中存在一个问题： Issue

回答by Marco Silva

Well this is an old issue, I will explain what really happens and how to solve it:

嗯，这是一个老问题，我将解释真正发生的事情以及如何解决它：

P.S: If you want to go straight to SOLUTION just scroll down right away.

PS：如果您想直接进入解决方案，请立即向下滚动。

The code of $ionicHistory.clearCache():

$ionicHistory.clearCache() 的代码：

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

So, as you can see, it takes 1 parameter cllaed stateIds which is an array of stateId. Indeed i struggled to find out that stateId is nothing more than stateName.

因此，如您所见，它需要 1 个参数 cllaed stateIds，它是一个 stateId 数组。事实上，我努力发现 stateId 只不过是 stateName。

So, let's go deeper. The code of $ionicNavView.clearCache which is used in the line above "instance.clearCache(stateIds)" is:

所以，让我们更深入。在“instance.clearCache(stateIds)”上面一行中使用的 $ionicNavView.clearCache 的代码是：

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');
  }

}
};

And as you can see in the code, this clearCache DOES NOT CLEAR ALL CACHES, instead, it destroy all cached views that matches a value in the stateIds array. If there's no parameter IT JUST DESTROY THE ACTUAL VIEW.

正如您在代码中看到的，此 clearCache 不会清除所有缓存，而是销毁与 stateIds 数组中的值匹配的所有缓存视图。如果没有参数，它只会破坏实际视图。

So the solution for this, using just the Ionic way is to call $ionicHistory.clearCache() with all your state names in an array as parameter.

因此，仅使用 Ionic 方式的解决方案是使用数组中的所有状态名称作为参数调用 $ionicHistory.clearCache() 。

E.g: SOLUTION $ionicHistory.clearCache(['login', 'map', 'home']); I cannot belive any Ionic developer didnt dug into the code before, or missed this simple datail. There's a lot of people who's aching for this.

例如：解决方案 $ionicHistory.clearCache(['login', 'map', 'home']); 我无法相信任何 Ionic 开发人员之前没有深入研究过代码，或者错过了这个简单的数据。有很多人为此感到痛苦。

Just to make it crystal clear, i want to point out where the bug itself is (if we can call it bug), maybe can be handy for devs:

为了清楚起见，我想指出错误本身的位置（如果我们可以称之为错误），也许对开发人员来说很方便：

self.clearCache = function(stateIds){

self.clearCache = 函数（stateIds）{

[...]

[...]

 var viewElements = $element.children();

} What the whole function does is basically:

整个函数所做的基本上是：

Get all elements using JQLite Loop the elements Check if an element equals one in the StateIds array and destroy it; go to next element. Check if element in the loop is cached or active, and in both true cases destroy it I wont dig deeper into this but debugging it i could see that the elements gotten from var viewElements = $element.children(); is not an array of all your views content, not even the cached ones, intentionally or not it does not loop through out all your states to clear all those that matches 'ACTIVE' or 'CACHED'. If you want it to loop through ALL your states and destroy all cached views and data you need to explicity pass the stateIds array parameter.

使用 JQLite 获取所有元素 循环元素 检查 StateIds 数组中的元素是否等于 1 并销毁它；转到下一个元素。检查循环中的元素是否已缓存或处于活动状态，在两种真实情况下都将其销毁 不是所有视图内容的数组，甚至不是缓存的内容，无论是否有意，它都不会遍历所有状态以清除所有与“活动”或“缓存”匹配的状态。如果您希望它遍历所有状态并销毁所有缓存的视图和数据，则需要明确传递 stateIds 数组参数。

Besides that there's another strange behavior, because when i was debugging it i saw when the var viewElements array was filled up with 2 elements, and these 2 elements were from the same state, one resolved to 'CACHED' another resolver to 'ACTIVE', even resolving to the 2 types used in the if conditions the cache was not cleared at all.

除此之外还有另一个奇怪的行为，因为当我调试它时，我看到 var viewElements 数组被 2 个元素填满，而这 2 个元素来自相同的状态，一个解析为“缓存”，另一个解析器为“活动”，甚至解析为 if 条件中使用的两种类型，缓存根本没有被清除。

I personally think that this is somekind wrong implemented or is wide used wrongly. The fact is that there's a lot of people cracking their heads on this and devs don't even give this simple explanation.

我个人认为这是某种错误实施或被广泛错误使用。事实是有很多人对此嗤之以鼻，开发人员甚至没有给出这个简单的解释。