使用 localStorage Angular 更新范围值答案

【问题标题】：Update value of range using localStorage Angular使用 localStorage Angular 更新范围值
【发布时间】：2016-06-29 17:07:35
【问题描述】：

我正在尝试使用 localStorage 更新 Angular 中范围输入的值。

这是我的 HTML 中的内容：

input type="range" id="myRange" value={{audio.volume}}  min="0" max="1" step="0.01" ng-model="audio.volume" ng-change="adjustVolume()"

我希望范围的值是动态的。

这是我的 js：

$scope.adjustVolume = function (){ 
  localStorageService.set("volume",$scope.audio.volume);
}

通过这种方式，我设法将“音量”键保存在 localStorage 中，但如果我刷新页面，范围滑块的位置会回到 1，即使 localStorage 仍设置为其他值号码。

如何保持范围的值与localStorage 的值相同，以及范围的位置。

【问题讨论】：

您的控制器中最初设置的 $scope.audio.volume 是什么？您可能不会在控制器加载时根据本地存储值定义它。
在页面加载时我会检查 if (localStorageService.get("volume") == null){ localStorageService.set("volume","1");} else{ localStorageService.set( "音量",$scope.audio.volume);因为我想如果 localStorage 中的密钥卷不存在，范围的值是 1，如果它已经存在是 localStorage 的值。
如果这是您的实际代码，那么逻辑是“如果 localStorageService.get("volume") 不为空，则将 'volume' 的 localStorageService 值设置为 $scope.audio.volume”。假设在这个阶段 $scope.audio.volume 没有值，逻辑只是说“如果 localStorage 中有值，则将其设置为 null”。尝试用以下代码替换您的代码： if (localStorageService.get("volume") == null){ localStorageService.set("volume","1");}; $scope.audio = $scope.audio || {}; $scope.audio.volume = localStorageService.get("volume");

标签： angularjs range local-storage angular-local-storage

【解决方案1】：

无论您在控制器内的何处初始化范围属性，您都需要使用来自 localStorage 的值来分配 $scope.audio.volume 的值。例如：

$scope.audio.volume = localStorageService.get("volume");

但这仅在您已经初始化属性“音频”时才有效。如果音量是您要初始化的“音频”的唯一属性，那么您的初始化应该如下所示：

$scope.audio = {'volume':localStorageService.get("volume")};

因此控制器的示例如下所示：

var myApp = angular.module('myApp',[]);

myApp.controller('MyAudioController', ['$scope', function($scope) {
  $scope.audio = {'volume':localStorageService.get("volume")};//<--THIS IS IMPORTANT
  $scope.adjustVolume = function (){ 
     localStorageService.set("volume",$scope.audio.volume);
  }
}]);

【讨论】：

我这样做是为了设置 localStorage 中的音量值 localStorageService.set("volume",$scope.audio.volume);它保存它，我的问题是，当我刷新页面时，范围的值又回到 1。我希望它与 localStorage 中的值相同
对不起，我在原始答案中使用了 localStorage 的“set”方法而不是“get”。我更新了它 - 希望现在更清楚了。

【解决方案2】：

我通过使用 watch 功能解决了这个问题，每次发生变化时都会更新值。

         $scope.$watch(function(){
            $scope.audio.volume = localStorageService.get("volume");                
            return true;
        });

【讨论】：