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

Question

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

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

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

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

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

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

如果我用这个

 $localstorage.get('gender');

如果什么都没有存储会怎样？看起来方法 get()s 来自 localStorage 的值或获取默认值。

所以如果我这样做：

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 并得到同样的结果。

帮忙？

Answer 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;
}

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

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

Angular model not updating into localStorage via onChange or ng-change

angularjs

local-storage

ionic