本地存储的角度服务答案

【问题标题】：Angular service for localstorage本地存储的角度服务
【发布时间】：2017-08-26 17:36:09
【问题描述】：

因此，作为一个项目，我被要求使用 Angular 制作一个小型应用程序。对于本地存储，我想使用单独的 js 作为服务。

我想要做的是使用控制器页面让 html 页面能够使用服务调用本地存储。这样做的原因是我想从多个 html 页面访问本地存储。

我在下面发布我的代码，非常感谢您的帮助。

配置文件控制器：

app.controller("ProfileController", function($scope, DataService) {
  $scope.profile = DataService.getProfile();
});

profilehtml:

<html>
<head>
    <link rel="stylesheet" href="CSS/stylesheet.css">
</head>

<body>
    <div class="page">
        <h1> Overflow test for longer pages </h1> <br>

        <div id = "textholder" ng-repeat="data in profile">
           <span>{{data.id}}</span>
        </div>
    </div>
</body>

服务：

app.service("DataService", function(){
  console.log("DataService");

  var localProfile = JSON.parse(localStorage.getItem("profile"));

  if(localProfile != undefined && localProfile.length>0)
  { this.profiles = localProfile; }

  else {
    this.profile = [
        { id: "1526", username: "berserk",      password: "berserk",    age: "31",          sex: "male"},
        { id: "1358", username: "Johnathan",    password: "test",       age: "17",          sex: "male"},
        { id: "2539", username: "Britney",      password: "test",       age: "18",          sex: "female"},
        { id: "1486", username: "Kevin",        password: "test",       age: "7",           sex: "male"},
        { id: "7777", username: "jesus",        password: "holy",       age: "unknown",     sex: "male"},
        { id: "6666", username: "satan",        password: "hell",       age: "unknown",     sex: "unknown"}
    ];
  }

  this.getProfile = function() { 
     return this.profile;
  }
});

【问题讨论】：

标签： javascript angularjs html service local-storage

【解决方案1】：

上面的代码有几个错误，

(i)您需要将 DataService 注入控制器。

(ii) 您可以不使用 $scope 直接返回配置文件

app.service("DataService", function() {
  console.log("DataService");
  var localProfile = JSON.parse(localStorage.getItem("profile"));
  var profiles = JSON.parse(localStorage.getItem("profile"));

  if (localProfile != undefined && localProfile.length > 0) {
    this.profiles = localProfile;
  } else {
    this.profiles = [{
      id: "1526",
      username: "berserk",
      password: "berserk",
      age: "31"
    }, {
      id: "1358",
      username: "Johnathan",
      password: "test",
      age: "17"
    }, {
      id: "2539",
      username: "Britney",
      password: "test",
      age: "18"
    }, {
      id: "1486",
      username: "Kevin",
      password: "test",
      age: "7"
    }];
  }

  this.getProfile = function() {
    return this.profiles;
  }
});

DEMO

【讨论】：

我按照您的建议修改了代码，它似乎确实解决了我之前遇到的一些问题。请参阅上面的代码（它似乎运行没有错误）。然而，我现在遇到的页面问题仍然只显示 h1 文本而不是我试图调用的数据。知道什么可以解决这个问题吗？
你为什么要这样做 |获取用户：数据？你的 HTML 有问题，不知道你需要显示什么
这是我前段时间做的一个过滤器。这是使用自制过滤器的要求之一，所以我创建了一个。它以前工作过，但那是在将数据库放入控制器时。我试图做的基础是以任何方式显示数据。现在我展示它的方式并不那么有趣，只要我能够展示它。
这可能是导致问题的原因！为什么在 ng-repeat 中再次显示 {{data}}。这是不必要的
我可以轻松更改整个部分。基础是显示数据的 ng-repeat，我只是不确定如何在 ng-repeat 中显示数据。我使用了一个我发现的示例来显示控制器中的数据，但是在处理服务时代码似乎不起作用。老实说，我没想到会这样，但我发现很难找到有效的修复方法，因为这种特殊的编码方式显然没有在其他人的线程中使用......

【解决方案2】：

我看不到 localStorage 的用途，因为您没有初始化它，而是返回初始化的配置文件。除非您传递整个数组，否则如果您决定添加配置文件，您可能会丢失信息。 localProfile 和 profiles 变量的键也是相同的，即 profile

【讨论】：