Angular 模型未通过 onChange 或 ng-change 更新到 localStorage答案

【问题标题】：Angular model not updating into localStorage via onChange or ng-changeAngular 模型未通过 onChange 或 ng-change 更新到 localStorage
【发布时间】：2015-04-18 07:33:55
【问题描述】：

所以我完全接受我可能会在这里做一些非常非常愚蠢的事情，但这里就是这样。

我使用具有 set() 和 get() 方法的 $localstorage api 将我的用户性别存储在 localStorage 中。我在 UI 中使用了角度范围滑块，只是因为它看起来不错。

这是控制器中的代码，它应该在您启动程序时设置性别，以及应该存储性别的函数。

来自离子公式页面。我不明白这一点：

get: function(key, defaultValue) {
  return $window.localStorage[key] || defaultValue;
},

我知道它在 $localstorage 上创建了一个 get() 方法，但我在让它工作时遇到了一些麻烦，这是因为我不理解它。

如果我用这个

 $localstorage.get('gender');

如果没有存储任何内容会发生什么？看起来方法 get() 从 localStorage 中获取值或获取 defaultValue。

如果我这样做：

get: function(key, defaultValue) {
  return $window.localStorage[key] || 0;
},

当没有存储任何内容时，我应该将 0 作为默认值，是吗？还是我必须做其他事情？

我正在尝试使用它来存储用户性别。我这样初始化它：

$scope.usergender = $localstorage.get('storeGender');
 console.log("Usergender on initialise is", $scope.usergender);

然后像这样存储它：

changeGender = function(){$localstorage.set('storeGender',$scope.usergender)
console.log("Usergender is now", $scope.usergender);
}

我的 html 看起来像这样：

<div class="item range range-assertive">
    <i class="icon ion-male"></i> Male
    <input type="range" name="gender" min="0" max="1" ng-model="usergender" onChange="changeGender()">
    Female <i class="icon ion-female"></i>
  </div>

目前我在控制台中得到的只是：

  Usergender on initialise is undefined.

即使在我使用范围滑块尝试更改内容后，这种情况仍然存在。我试过使用 ng-change 并得到同样的结果。

帮助？

【问题讨论】：

你能把这个放到plnkr吗？ changeGender 函数在哪里？
changeGender 函数在模板控制器中。
所以您使用的是 ngStorage？ $localstorage 应该是 $localStorage。
不，我没有使用 ngStorage。我正在使用 Ionic localStorage 教程，该教程向您展示了一个在 $localstorage 上使用 get() 和 set() 方法的小 api

标签： angularjs local-storage ionic

【解决方案1】：

对于下面的代码，如果您的本地存储的键中没有任何内容，您将得到 null...

function supports_html5_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}


if(supports_html5_storage() ){
  var value = localStorage.getItem(key);
  return (value !== null) ? value : 0;
}

【讨论】：

【解决方案2】：

好的，我已经破解了。我不完全确定我是否诚实，但我这样做了：

我创建了一个通用函数，而不是更改性别的函数：

    $scope.changeVal = function(storeName, val){
     $localstorage.set(storeName,val);
     console.log(storeName + " is now " + val);
    }

这允许我使用以下格式存储任何内容：

<input type="range" name="gender" min="0" max="1" ng-model="usergender" ng-change="changeVal('storeGender', usergender)">

您可以在其中将 storeGender 和 usergender 更改为您想要的任何内容。我现在用它来存储一堆其他设置。

诀窍是添加

 $scope

在函数的前面。

注意：记住 localStorage 只存储字符串，所以如果你存储数字，你还必须像这样 parseInt()：

    $scope.userage = parseInt($localstorage.get('storeAge'));

【讨论】：