localStorage value doesn't want to be set

Question

I have problem with set values in localStorage. I use AngularJS and Electron. When I update refreshTime, values for errors and opacity are set to null. Why?

$scope.storageLang = localStorage.getItem("language");
$scope.storageMonitors = localStorage.getItem("monitors");
$scope.storageAlarm = localStorage.getItem("alarm");
$scope.storageErrors = localStorage.getItem("errors");
$scope.storageDomain = localStorage.getItem("domain");
$scope.storageOpacity = localStorage.getItem("opacity");
$scope.refreshTime = localStorage.getItem("refreshTime");

$scope.submit = function($event) {
      $event.preventDefault();
      localStorage.setItem("domain", $scope.storageDomain);
      localStorage.setItem("language", $scope.storageLang);
      localStorage.setItem("monitors", $scope.storageMonitors);
      localStorage.setItem("alarm", $scope.storageAlarm);
      localStorage.setItem("errors", $scope.storageErrors);
      localStorage.setItem("opacity", $scope.storageOpacity);
      localStorage.setItem("refreshTime", $scope.refreshTime);
};

In HTML all my inputs has ng-model="storageLang" etc...

<form ng-submit="submit($event)" style="overflow:hidden">

    <div class="field">
        <label>{{ lang.domain }}</label>
        <input type="text" ng-model="storageDomain" value="{{ storageDomain }}">
    </div>

    <div class="field">
        <label>{{ lang.language }}</label>
        <select ng-model="storageLang">
            <option value="de" ng-selected="storageLang=='de'">Deutsch</option>
            <option value="en" ng-selected="storageLang=='en'">English</option>
            <option value="pl" ng-selected="storageLang=='pl'">Polski</option>
        </select>
    </div>

    <div class="field">
        <label>{{ lang.monitors }}</label>
        <select ng-model="storageMonitors">
            <option value="1" ng-selected="storageMonitors==1">1</option>
            <option value="2" ng-selected="storageMonitors==2">2</option>
            <option value="3" ng-selected="storageMonitors==3">3</option>
            <option value="4" ng-selected="storageMonitors==4">4</option>
        </select>
    </div>

    <div class="field">
        <label>{{ lang.alarm }}</label>
        <select ng-model="storageAlarm">
            <option value="1" ng-selected="storageAlarm=='1'">{{ lang.yes }}</option>
            <option value="0" ng-selected="storageAlarm=='0'">{{ lang.no }}</option>
        </select>
    </div>

    <div class="field">
        <label>{{ lang.errorslimit }}</label>
        <input type="number" ng-model="storageErrors" value="{{ storageErrors }}" min="10">
    </div>

    <div class="field">
        <label>{{ lang.opacity }}</label>
        <input type="number" ng-model="storageOpacity" value="{{ storageOpacity }}" min="25" step="5">
    </div>

    <div class="field">
        <label>{{ lang.refreshTime }}</label>
        <input type="number" ng-model="refreshTime" value="{{ refreshTime }}" min="10" step="1">
    </div>

    <button class="button expanded neutral">{{ lang.save }}</button>

</form>

Answer 1

Problem was that I use value="{{ storageOpacity }}" and I just need to use ng-model. Beside this I need to use parseInt for some integer values...