不想设置 localStorage 值答案

【问题标题】：localStorage value doesn't want to be set不想设置 localStorage 值
【发布时间】：2018-07-22 12:53:04
【问题描述】：

localStorage 中的设置值有问题。我使用 AngularJS 和电子。当我更新 refreshTime 时，errors 和 opacity 的值设置为 null。为什么？

$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);
};

在 HTML 中，我所有的输入都有 ng-model="storageLang" 等...

<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>

【问题讨论】：

你能在提交被调用的地方显示标记吗？
我有编辑代码。奇怪的是保存了其他值，但没有保存错误和不透明度。
你能包含所有input 元素吗？不看一切，很难看出有什么区别。
是的，我仔细看了一下，一切看起来都还不错。问题可能与视图有关。
更新了代码。还有一件事。在我添加 refreshTime 之前，一切都很好。

标签： angularjs local-storage electron

【解决方案1】：

问题是我使用value="{{ storageOpacity }}"，而我只需要使用ng-model。除此之外，我需要将parseInt 用于一些整数值...

【讨论】：

【解决方案2】：

localStorage 只能处理字符串，因此设置整数会导致问题。

使用像 localForage 这样的库，它具有相同的 API，但将在 Electron 中使用 IndexedDb 并处理其他数据类型。

【讨论】：