jjzjj

javascript - 具有 promise 和本地存储的 Angular JS 日志记录数据

coder 2023-08-09 原文

我想在我的 Angular 应用程序中记录操作。

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

完成此操作后,我想尝试发布当前项目。我还想要一个(同步)按钮,它在整个过程中运行而不通过操作日志过程。这样用户就可以尝试发布他们之前无法发布的所有项目。

我正在考虑这样处理它。 提交时

-将项目添加到本地存储,然后尝试发布。 (以便它首先发布较早的项目)

成功了

-从本地存储中删除项目

错误

-将项目保存到本地存储

如下图所示,我正在努力实现这一目标,但我不确定这是否是解决此问题的最佳方式。

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

我添加了一个名为 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>

最佳答案

"How can I remove the local storage item on success without removing the _namelog "

您的设计存在一些问题:

1) 对于本地存储 key=name value 是一个数组。在您的 testPost 中,您不知道要发布的是哪个数组项。如果您知道可以从 LS 检索该数组,则从数组中拼接该元素并将其字符串化回 LS。

2) 来回需要太多的 String 和 JSON。

因此,我的建议是遵循 name-0、name-1、name-2 等 key 命名方案,并将每个日志条目存储为单独的 key 。在 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);

            }
          }
        }
      ]);

关于javascript - 具有 promise 和本地存储的 Angular JS 日志记录数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26824597/

有关javascript - 具有 promise 和本地存储的 Angular JS 日志记录数据的更多相关文章

  1. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时,它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器?这是不可能的吗?谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  2. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  3. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手;我正在运行一些rspec测试,但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音?我仔细检查了环境是否设置为:test,这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  4. ruby - Ruby 有 `Pair` 数据类型吗? - 2

    有时我需要处理键/值数据。我不喜欢使用数组,因为它们在大小上没有限制(很容易不小心添加超过2个项目,而且您最终需要稍后验证大小)。此外,0和1的索引变成了魔数(MagicNumber),并且在传达含义方面做得很差(“当我说0时,我的意思是head...”)。散列也不合适,因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题,但我很想知道:Ruby标准库是否已经带有这样一个类? 最佳

  5. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型,即Invoice和Invoice_details。一个Invoice_details属于Invoice,一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  6. ruby-on-rails - Rails 3.1 中具有相同形式的多个模型? - 2

    我正在使用Rails3.1并在一个论坛上工作。我有一个名为Topic的模型,每个模型都有许多Post。当用户创建新主题时,他们也应该创建第一个Post。但是,我不确定如何以相同的形式执行此操作。这是我的代码:classTopic:destroyaccepts_nested_attributes_for:postsvalidates_presence_of:titleendclassPost...但这似乎不起作用。有什么想法吗?谢谢! 最佳答案 @Pablo的回答似乎有你需要的一切。但更具体地说...首先改变你View中的这一行对此#

  7. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  8. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  9. ruby - Rack:如何将 URL 存储为变量? - 2

    我正在编写一个简单的静态Rack应用程序。查看下面的config.ru代码:useRack::Static,:urls=>["/elements","/img","/pages","/users","/css","/js"],:root=>"archive"map'/'dorunProc.new{|env|[200,{'Content-Type'=>'text/html','Cache-Control'=>'public,max-age=6400'},File.open('archive/splash.html',File::RDONLY)]}endmap'/pages/search.

  10. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流,在人体运动的基础上,添加双手手指部分的运动。双手手背的角度仍由Optitrack提供,数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照:https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming,开始向Unity3D广播数据;MotionVenus中设置->选项选择Unit

随机推荐