Angularjs 使用本地存储数据代替$scope

是否有任何方法可以使用最初存储在localStorage中的内容而不是使用$scope.whatever？在将$scope.JSON对象传输到localStorage之后，我很难检索到最初存储在$scope.JSON对象中的内容。也许有一些你知道的解决办法

我目前正致力于将$scope.whatever中的数据保存到localStorage，但我遇到的一个问题是，当我刷新运行javascript代码的页面时，我的$scope.dashboard上有一个空值，无法获取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;
                }
            }
        });
    };

}])

---

好的，我看到你的代码中有两个缺陷

一,

不管你的条件是真是假，你都在执行

localStorageService.set'widgets'，$scope.dashboards[1]

您的代码应该大致类似于：

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

在if localStorageService.get'widgets'==null{block中，在分配$scope.dashboards的值后，您没有在localStorage中设置它，尽管您正确地从else块中的localStorage获取。 在if块中添加localStorageService.set'widgets'，$scope.dashboards

---

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

您可以详细说明您的问题吗？这个问题太模糊了，任何人都无法回答。您可以将数据存储在localStorage中，并在控制器初始值设定项运行时将其添加到$scope中。您只需要以与使用localStorage相同的方式正确使用localStorage。是否正在加载您的fi本地设置还是使用web服务器？@AniketSinha，我两个都试过了。如何从localStorageService设置localStorage中的项？尝试localStorage.setItem'test'，'123'；console.loglocalStorage.getItem'test'；

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

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