Question

我想在我的角应用中记录操作。

如果我无法发布，那么我想将该项目添加到本地存储中的另一个日志中，以便下次发布时我也可以尝试添加这些项目。

一旦完成，我想尝试发布当前项目。我还希望有一个（同步）按钮，它可以在不进行操作日志过程的情况下运行整个过程。这样用户就可以尝试发布他们之前无法发布的所有项目。

我正在考虑像这样接近它。提交

-add item to local storage，然后尝试发布。（以便先发布先前的项目）

成功

- 从本地存储中删除项目

错误

- 将项目保存到本地存储

如下图所示，我是一个公平的方式，但是我不确定这是否是解决此问题的最佳方法。

目前我可以发布有关成功的数据，但不会从本地存储中删除单个项目。

我在一个名为removeName的userService中添加了我在下面的代码中注释掉的内容，因为它当前删除了_nameLog而不是该项目的本地存储引用。

但是当您在codepen demo中运行代码时，它每次都会发布每个项目，因为我没有在成功时将其删除？

如何在不删除_namelog的情况下删除成功时的本地存储项（因为这需要保留在ng-repeat中）或者我应该采用不同的方式来接近它？

    <body ng-app="myApp">
    <div ng-controller="MyCtrl">
       <input type="text" ng-model="updatedname">
       <input type="button" value="Change name" ng-click="changeName(updatedname)"/>
       <br/>
          Hello, {{name}}! 
    <ul>
        <li ng-repeat="name in nameLog">{{name.value}} - {{name.time}}</li>
    </ul>    
         <input type="button" value="sync" ng-click="syncPosts()"/>
    </div>
    </body>

    <script>
    var myApp = angular.module('myApp',[]);
    myApp.factory('UserService', ['$window','$http', function($window,$http) {
        var _nameLog = [];
        var userService = {};
        userService.name = "John";
        userService.ChangeName = function (value) {
          userService.name = value;
        };
        userService.logName  = function (value) {
          _nameLog.push ({
            "value":value,
            "time" :Date.now()
          });
        };
        userService.removeName  = function (value) {
           return delete _nameLog[0];
        };
        userService.getNameLog = function(){ 
          return _nameLog; 
        };
        userService.setLS = function(key, value) {
          $window.localStorage[key] = value;
        },
        userService.getLS = function(key, defaultValue) {
          return $window.localStorage[key] || defaultValue;
        };
        userService.setObject = function(key, value) {
          $window.localStorage[key] = JSON.stringify(value);
        };
        userService.getObject = function(key) {
          return JSON.parse($window.localStorage[key] || '{}');
        };
        userService.testPost = function(myVal,myTime) {
          return $http.post('http://jsonplaceholder.typicode.com/posts', {title:myVal,body:myTime,userId: 1});
        };
        return userService;
    }]);

    function MyCtrl($scope, UserService) {
        $scope.name = UserService.name;
        $scope.updatedname="";
        $scope.changeName=function(data){
            $scope.updateServiceName(data);
        }
        $scope.updateServiceName = function(name){
            UserService.ChangeName(name);
            UserService.logName(name);
            $scope.name = UserService.name;
            $scope.nameLog = UserService.getNameLog();
            UserService.setLS('name', JSON.stringify($scope.nameLog));
            getPosts();
        }
        $scope.syncPosts = function(){
            getPosts();
        }
        function testPost(myVal,myTime) {  
            UserService.testPost(myVal,myTime)
              .success(function(data, status, headers, config) {
                console.log('success');
                console.log(data);
                //UserService.removeName();
              })
              .error(function(data, status, headers, config) {
                console.log('error');
            });
        }
        function getPosts(){
            getObj = UserService.getObject('name');
            for (var k in getObj) {
              var myVal = getObj[k].value;
              var myTime = getObj[k].time;
              testPost(myVal,myTime);
              console.log(getObj[k].value);
            }
        } 
    }
    </script>

Answer 1

“如何在不删除的情况下删除成功时删除本地存储项目 _namelog“

您的设计存在一些问题：

1）对于本地存储密钥= name，该值是一个数组。在您的testPost中，您不知道您要发布的数组项目。如果你知道你可以从LS splice中检索该数组，那么该数组中的元素会将其字符串化回LS。

2）来回需要过多的字符串到JSON。

因此，我的建议是遵循一个关键的命名方案，如name-0，name-1，name-2，并将每个日志条目存储为一个单独的密钥。在LS中保留一个计数器。添加日志条目时增加此值。然后在testPost中你可以删除该密钥。将k作为参数从getPosts传递给testPost。

解决方案位于plunkr solution

    <body ng-app="myApp">
    <div ng-controller="MyCtrl as ctrl">
       <input type="text" ng-model="updatedname">
       <input type="button" value="Change name" ng-click="changeName(updatedname)"/>
       <br/>
          Hello, {{name}}! 
    <ul>
        <li ng-repeat="name in nameLog">{{name.value}} - {{name.time}}</li>
    </ul>    
         <input type="button" value="sync" ng-click="syncPosts()"/>
    </div>
    </body>


    angular.module('myApp', [])
      .factory('UserService', ['$window', '$http',
        function($window, $http) {
          var _nameLog = [];
          var userService = {};
          userService.name = "John";
          userService.ChangeName = function(value) {
            userService.name = value;
          };
          userService.logName = function(value) {
            var logCount = userService.getLS('count', undefined);
            if (angular.isUndefined(logCount)) {
              logCount = -1;//so that this gets incremented to 0

            } 
            var obj = {
              "value": value,
              "time": Date.now()
            };
            logCount++;

            _nameLog.push(obj);
            this.setObject('count',logCount);
            this.setObject('name#'+logCount, obj);

          };
          userService.removeName = function(value) {
            return delete _nameLog[0];
          };
          userService.getNameLog = function() {
            return _nameLog;
          };
          userService.setLS = function(key, value) {
            $window.localStorage[key] = value;
          },
          userService.getLS = function(key, defaultValue) {
            return $window.localStorage[key] || defaultValue;
          };
          userService.deleteLS = function(key) {
            return $window.localStorage.removeItem(key);
          };
          userService.setObject = function(key, value) {
            $window.localStorage[key] = JSON.stringify(value);
          };
          userService.getObject = function(key) {
            return JSON.parse($window.localStorage[key] || '{}');
          };
          userService.testPost = function(myVal, myTime) {
            return $http.post('http://jsonplaceholder.typicode.com/posts', {
              title: myVal,
              body: myTime,
              userId: 1
            });
          };
          return userService;
        }
      ])
      .controller('MyCtrl', ['$scope', 'UserService',
        function($scope, UserService) {
          $scope.name = UserService.name;
          $scope.updatedname = "";
          $scope.changeName = function(data) {
            $scope.updateServiceName(data);
          }
          $scope.updateServiceName = function(name) {
            UserService.ChangeName(name);
            UserService.logName(name);
            $scope.name = UserService.name;
            $scope.nameLog = UserService.getNameLog();
            //$scope.getPosts();
          }
          $scope.syncPosts = function() {
            $scope.getPosts();
          }
          $scope.testPost = function(myVal, myTime, k) {
            UserService.testPost(myVal, myTime)
              .success(function(data, status, headers, config) {
                console.log('success');
                console.log(data);
                //UserService.removeName();
                UserService.deleteLS('name#'+k);
              })
              .error(function(data, status, headers, config) {
                console.log('error');
              });
          }
          $scope.getPosts = function() {
            var logCount = UserService.getLS('count', undefined);
            if (angular.isUndefined(logCount)) {
              return;//there is nothing in log
            }
            for(var k = 0 ; k <= logCount ; k++) {
              var getObj = UserService.getObject('name#'+k);

              var myVal = getObj.value;
              var myTime = getObj.time;
              $scope.testPost(myVal, myTime, k);
              console.log(getObj.value);

            }
          }
        }
      ]);

Answer 2

我认为如果您使用本地存储来保存尚未同步的名称，那是因为您希望确保用户在关闭浏览器之前没有同步（可能是因为他们没有＆＃ 39;当时有互联网连接），下次他们开始会话时你可以尝试重新同步这些名字（希望他们有互联网连接时）。这种技术在移动应用程序中非常受欢迎，因为它们一直进出互联网连接。

如果是这种情况，那么请务必记住，用户可能有等待上一个会话同步的名称，并且您要确保这些名称与之同步从当前会话中添加的任何新名称。

此方案的最简单解决方案是假设本地存储中的所有名称都是尚未同步的名称（来自当前会话甚至是前一个会话）。

当用户首次启动会话时，您将读取本地存储中的所有名称以预先填充_namelog数组，以向用户显示仍需要同步的所有名称。

每次用户添加名称时，您都会从本地存储中读取当前的名称数组（让我们从密钥namesToPush中说出来），将最新名称推送到{{1} }数组以及namesToPush数组，然后_nameLog JSON.stringify数组返回本地存储。您希望始终将名称添加到本地存储，因为您不知道用户何时关闭当前会话。

然后，当用户同步名称时，您将读取本地存储中的所有名称并发布它们。如果帖子成功，则从本地存储中删除namesToPush，否则您将其保留在那里以便稍后重新同步。

这种方法的好处是

您不必尝试跟踪namesToPush数组中尚未同步的名称（解决当前问题）。
在本地存储中使用单个阵列意味着只有一个读取/写入本地存储的名称已添加并同步，并且只有一个删除（写入）成功同步
- 如果使用唯一键将名称添加到本地存储，则必须保存用于未保存的一批名称的第一个键，以便您可以正确检索以后会话中尚未同步的所有名称。这很容易导致off-by-one errors，因为您必须在每次同步时跟踪此索引。
- 虽然一种独特的密钥方法可能使您不必在添加名称时从本地存储中读取数据，但成功同步会导致任何潜在的节省，因为您必须从本地存储中删除许多名称。如果用户在从本地存储中删除所有名称之前关闭会话，这也可能导致问题。
通过从本地存储中读取每个帖子而不是尝试保留本地数组的待处理名称有助于确保不会错过任何一个名称（这也有助于消除任何潜在的缓存问题）或由于错误而发布两次名称。

Angular JS使用promises和本地存储记录数据

2 个答案: