Javascript 将angular gridster保存在本地存储中

我想将angular gridster（每个项目的位置、大小和顺序）保存在本地存储中，然后保存在数据库中，并在页面加载时检索存储的位置。 我为gridster找到了一些东西，但没有为angular gridster找到任何东西。 能帮我吗？多谢各位

 vm.gridsterOptions = {
    columns: 4,
    mobileModeEnabled: true,
    draggable: {
      enabled: true, // whether dragging items is supported
      handle: '.H', // optional selector for drag handle
      stop: function(event, $element, widget) {         

      }
    },
    resizable: {
      enabled: true,
      stop: function (e, ui, $widget) {          

      },
      handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],


    },
  };

这是我的Html

 <div gridster="test.gridsterOptions" class="gridster-ready">
        <li class="my-class" gridster-item ng-repeat="datas in     test.chartDataArray "  >

             <highchart  id="container" style="width:100%;height:88%;margin: 0 auto" config="datas" ></highchart>

        </li>
  </div>

实现这一点的最佳方法是创建一个服务，其功能是从本地存储中保存和检索小部件数据。将此服务注入仪表板控制器，您应该能够在本地保存小部件数据。下面是一个“widgetmanager”服务的示例，该服务将保存到本地存储：

angular.module('app')
    .service('WidgetsManager', widgetsManagerService);

    function widgetsManagerService() {
        return {
        getWidgets: function () {
            return angular.fromJson(localStorage.getItem('widgets')) || [];
        },
        setWidgets: function (widgets) {
            return localStorage.setItem('widgets', angular.toJson(widgets));
        },
        clearWidgets: function () {
            return localStorage.removeItem('widgets');
        },
    };
}

如果您的应用程序模块被称为“应用程序”，并且您可以像这样注入服务，那么这将起作用：

angular.module('app').controller('DashboardController', 
['WidgetsManager', dshaboardContoller]);

function dashboardController(WidgetsManager){
    //whatever code. accessing widget manager functions would be preceded by the
    //WidgetManager service like so

    var widgets = WidgetsManager.getWidgets()
} 

---

注入服务的方法有很多，但我就是这样做的。祝你好运，希望这有帮助

实现这一点的最佳方法是创建一个服务，该服务用于从本地存储中保存和检索小部件数据。将此服务注入仪表板控制器，您应该能够在本地保存小部件数据。下面是一个“widgetmanager”服务的示例，该服务将保存到本地存储：

angular.module('app')
    .service('WidgetsManager', widgetsManagerService);

    function widgetsManagerService() {
        return {
        getWidgets: function () {
            return angular.fromJson(localStorage.getItem('widgets')) || [];
        },
        setWidgets: function (widgets) {
            return localStorage.setItem('widgets', angular.toJson(widgets));
        },
        clearWidgets: function () {
            return localStorage.removeItem('widgets');
        },
    };
}

如果您的应用程序模块被称为“应用程序”，并且您可以像这样注入服务，那么这将起作用：

angular.module('app').controller('DashboardController', 
['WidgetsManager', dshaboardContoller]);

function dashboardController(WidgetsManager){
    //whatever code. accessing widget manager functions would be preceded by the
    //WidgetManager service like so

    var widgets = WidgetsManager.getWidgets()
} 

注入服务的方法有很多，但我就是这样做的。祝你好运，希望这有帮助