IndexedDB，如何在不重新加載頁面的情況下獲取更新的數據？

Question

我正在使用angular-localforage，並且在IndexedDB中有一些密鑰。 當我確實將新值設置為我的鍵時，它仍然看起來像以前的值，因為我重新加載了頁面並且它看起來像是最新的值。

有什么解決方案可以在不重新加載頁面的情況下獲取更新的數據嗎？

$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表並單擊Refresh IndexedDB，該值也不會更改。

就我而言，如果我重新加載開發人員工具，它會發生變化（因此將其隱藏並再次顯示）。 這是一種解決方法，但我認為這是一個錯誤。