使用本地存储数据而不是 $scope

Question

是否有任何方法可以使用最初存储在 localStorage (https://github.com/grevory/angular-local-storage) 中的内容，而不是使用 $scope.whatever？在我将 $scope.whatever JSON 对象转移到 localStorage 之后，我很难检索最初存储在我的 $scope.whatever JSON 对象中的内容。也许有一些你知道的解决方案可以解决这个问题。

我目前正在将数据从 $scope.whatever 保存到 localStorage，但我遇到的一个问题是，当我刷新运行我的 javascript 代码的页面时，我的 $scope 上会出现空值。仪表板，无法获取 localStorage 值。下面是我的控制器：

function($scope, $timeout, $sce, localStorageService) {
    var lsLength = localStorageService.length();
    var lsKeys = localStorageService.keys();

    $scope.gridsterOptions = {
        margins : [20, 20],
        columns : 4,
        draggable : {
            handle : 'h4',
            stop : function(event, $element, widget) {

                if (lsLength == 0) {

                    localStorageService.set('widgets', $scope.dashboards[1]);
                } ** else {
                    localStorageService.set('widgets', $scope.dashboards[1]);
                } **

            }
        }
    };

    if (localStorageService.get('widgets') == null) {

        $scope.dashboards = {
            '1' : {
                id : '1',
                widgets : [{
                    code : "urlfilter-widget.html",
                    col : 0,
                    row : 0,
                    sizeY : 1,
                    sizeX : 2,
                    title : "URL Filter"
                }, {
                    code : "systemdash-widget.html",
                    col : 2,
                    row : 0,
                    sizeY : 2,
                    sizeX : 2,
                    title : "System Information"
                }, {
                    code : "device-widget.html",
                    col : 0,
                    row : 4,
                    sizeY : 1.5,
                    sizeX : 2,
                    title : "Device Clock"
                }, {
                    code : "cpupercentage-widget.html",
                    col : 2,
                    row : 4,
                    sizeY : 1,
                    sizeX : 2,
                    title : "CPU Percentage Usage"
                }, {
                    code : "memorypercentage-widget.html",
                    col : 0,
                    row : 6,
                    sizeY : 1,
                    sizeX : 2,
                    title : "Memory Percentage Usage"
                }, {
                    code : "proxyantivirusstatistics-widget.html",
                    col : 2,
                    row : 6,
                    sizeY : 1,
                    sizeX : 2,
                    title : "Proxy Antivirus Statistics"
                }, {
                    code : "firewallconnections-widget.html",
                    col : 0,
                    row : 8,
                    sizeY : 1,
                    sizeX : 2,
                    title : "Firewall Active Connections"
                }, {
                    code : "dpi-widget.html",
                    col : 2,
                    row : 8,
                    sizeY : 2,
                    sizeX : 2,
                    title : "Deep Packet Inspection"
                }, {
                    code : "toptendpichart-widget.html",
                    col : 0,
                    row : 10,
                    sizeY : 2,
                    sizeX : 2,
                    title : "Top 10 DPI Chart"
                }, {
                    code : "toptenurlfilter-widget.html",
                    col : 2,
                    row : 10,
                    sizeY : 2,
                    sizeX : 2,
                    title : "Top 10 URL Filter"
                }, {
                    code : "firewallgraph-widget.html",
                    col : 0,
                    row : 12,
                    sizeY : 1,
                    sizeX : 2,
                    title : "Firewall Connections"
                }]
            }
        };
    } else {
        $scope.dashboards = localStorageService.get(key);
    }
    // init dashboard
    for ( x = 0; x <= lsLength; x++) {
        var key = lsKeys[x];
        if (lsKeys == key) {
            $scope.dashboard = localStorageService.get(key);
            break;
        } else {
            $scope.dashboard = $scope.dashboards[1];
        }
    }
    $scope.clear = function() {
        $scope.dashboard.widgets = [];
    };

    $scope.addWidget = function() {
        $scope.dashboard.widgets.push({
            name : "New Widget",
            sizeX : 1,
            sizeY : 1
        });
    };
    $scope.watch('dashboards[1].widgets', function() {
    }, true);
}]).controller('CustomWidgetCtrl', ['$scope', '$modal',
function($scope, $modal) {

    $scope.remove = function(widget) {
        $scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
    };

    $scope.openSettings = function(widget) {
        $modal.open({
            scope : $scope,
            templateUrl : 'demo/dashboard/widget_settings.html',
            controller : 'WidgetSettingsCtrl',
            resolve : {
                widget : function() {
                    return widget;
                }
            }
        });
    };

}])

else 语句（如下）出现错误，因为 stop 读取 $scope.dashboards == null;

 ** else {
                        localStorageService.set('widgets', $scope.dashboards[1]);
                    } **

Answer 1

好的，我发现您的代码中有 2 个缺陷。

1.

if (lsLength == 0) {
  localStorageService.set('widgets', $scope.dashboards[1]);
} else {
  localStorageService.set('widgets', $scope.dashboards[1]);
}

无论你的条件是真还是假，你都在执行

localStorageService.set('widgets', $scope.dashboards[1]);.

你的代码应该或多或少像：

if (lsLength == 0) {
    localStorageService.set('widgets', $scope.dashboards[1]);
 }  else {
    localStorageService.get('widgets');
 }

1. 在您的if (localStorageService.get('widgets') == null) { 块中，分配$scope.dashboards 的值后，虽然您从else 块中的localStorage 中正确获取，但您并未在localStorage 中设置它。

在 if 块中添加 localStorageService.set('widgets',$scope.dashboards);。

如果需要更多内容，请尝试这些并发表评论。