使用localstorage数据代替$ scope

时间:2014-12-23 09:19:39

标签: angularjs angularjs-scope local-storage gridster angular-local-storage

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

我目前正在努力保存来自$ scope.whatever到localStorage的数据,但我遇到的一个问题是,当我刷新运行我的javascript代码的页面时,我的$ scope上有一个null。仪表板并且无法获取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]);
                    } **

1 个答案:

答案 0 :(得分:0)

好的,我在你的代码中看到了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的值后,您没有在localStorage中设置它,尽管您正在else块中的localStorage正确提取。
  2. 在if块中添加localStorageService.set('widgets',$scope.dashboards);

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