javascript - IndexedDB，如何在不重新加载页面的情况下获取更新的数据？

Question

我正在使用 angular-localforage，并且我的 IndexedDB 中有一些 key 。当我为我的键设置新值时，它似乎仍然是以前的值，因为我重新加载页面并且它似乎具有最新值。

是否有任何解决方案可以在不重新加载页面的情况下获取更新的数据？

$scope.addToStage = function($index) {
  event.stopPropagation();
  console.log($scope.items[$index].title);

  $localForage.getItem('stage').then(function(data) {
    if (data) {
      $localForage.removeItem('stage');
      console.log('Item stage Removed!');
    };
    $localForage.setItem('stage', $scope.items[$index]).then(function(data) {
      $localForage.bind($scope, 'stage');
    }) //setItem
  })

  $ionicHistory.clearCache();
  $state.reload();
  $ionicHistory.goBack();
};

** 虽然我认为这不是我的代码错误，因为当我使用 setItem() 和 removeItem() 添加新项目或删除主题时，需要重新加载页面才能查看开发人员工具资源中的更改。

** 如 Mozilla Developer 中所述:IndexedDB 最初包括异步 API 和同步 API；但同步版本已从规范中删除，因为它的需求值得怀疑。所以我认为我的问题目前没有任何绝对的答案，顺便说一句，任何资源、文章和链接都会有所帮助。 :)

Answer 1

我已经创建了一个测试代码

var app = angular.module('app', ['LocalForageModule']);
app.config(['$localForageProvider', function($localForageProvider)
{
   $localForageProvider.config({
        driver      : localforage.INDEXEDDB, // if you want to force a driver
        name        : 'myApp', // name of the database and prefix for your data, it is "lf" by default
        version     : 1.0, // version of the database, you shouldn't have to use this
        storeName   : 'keyvaluepairs', // name of the table
        description : 'some description'
    });
}]);
app.controller('MyCtrl', ['$scope', '$localForage', function($scope, $localForage) 
{
    $scope.load = function()
    {
        $localForage.getItem('name').then(function(data) 
        {
            console.log('Loaded ' + data + ' from DB');
            $scope.name = data;
        });
    };

    $scope.save = function()
    {
        console.log('Saved ' + $scope.name + ' to DB');
        $localForage.setItem('name', $scope.name).then(function(){});
    };

    $scope.refresh = function()
    {
        $scope.load();
    };

    $scope.load();
}]);     

和 HTML

<div ng-controller="MyCtrl">
    Hello <input ng-model="name" type="text" /><button ng-click="save()">save</button>
    <br/><br/>
    <button ng-click="refresh()">refresh</button>
</div>    

完整的jsfiddle http://jsfiddle.net/kzwtyn2c/

您可以保存名称，当您点击刷新按钮时，它将记录从数据库检索的值。

一切正常，但 Chrome 开发者工具似乎没有更新。即使您右键单击 IndexedDB 表并单击“刷新 IndexedDB”，该值也不会更改。

就我而言，如果我重新加载开发人员工具，它就会发生变化(因此隐藏它们并再次显示)。这是一种解决方法，但我认为这是一个错误。