CODEWITHSUNDEEP
javascriptangularjshtmlservicelocal-storage
Alwin G
Alwin G

Reputation: 115

Angular service for localstorage

So as a project I have been asked to make a small-scale app using Angular. For the localstorage i want to use a seperate js as a service.

What I'm trying to do is use a controller-page to give an html-page the ability to call the localstorage using the service. The reason for this being that I want to access the localstorage from multiple html-pages.

I'm posting my code below and help is greatly appreciated.

profilecontroller:

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>

service:

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;
  }
});

Upvotes: 1

Views: 1117

Answers (2)

codemano
codemano

Reputation: 43

I don't see the purpose of the localStorage, since you don't initialise it but rather return the initialised profile. Unless you pass the entire array, you'll might lose information if you decided to add a profile. Also the keys for localProfile and profiles variables are the same i.e. profile

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

There are few mistakes in the above code,

(i)You need to inject the DataService to the controller.

(ii) You can just return the profiles as it is without using $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

Upvotes: 1

Related Questions