Angular Service für localstorage

Also als ein Projekt wurde ich gebeten, eine kleine App mit Angular zu machen. Für den lokalen Speicher möchte ich ein separates js als Service nutzen.Angular Service für localstorage

Ich versuche eine Controller-Seite zu verwenden, um einer HTML-Seite die Möglichkeit zu geben, den lokalen Speicher über den Dienst aufzurufen. Der Grund dafür ist, dass ich von mehreren HTML-Seiten auf den lokalen Speicher zugreifen möchte.

Ich poste meinen Code unten und Hilfe wird sehr geschätzt.

Profile:

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

Quelle

2017-04-01 Alwin G

Es gibt einige Fehler in dem obigen Code,

(i) Sie müssen den DataService in den Controller injizieren.

(ii) Sie können nur die Profile zurück, wie es ohne die Verwendung von $ scope

ist

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

Quelle

2017-04-01 14:12:03 Sajeetharan

ich den Code geändert, wie Sie vorgeschlagen, so scheint es in der Tat einige der Probleme zu beheben ich in vorher lief. Siehe den obigen Code (der scheinbar ohne Fehler läuft). Ich habe jetzt jedoch in das Problem der Seite immer noch nur den h1 Text und nicht die Daten, die ich versuche zu rufen. Irgendeine Idee, was könnte das lösen? –

Warum versuchst du es mit | zu tun? getUser: Daten? Ihr HTML hat ein Problem, nicht sicher, was Sie anzeigen müssen – Sajeetharan

Es ist ein Filter, den ich vor einer Weile gemacht habe. Es war eine der Anforderungen, mit einem selbst erstellten Filter zu arbeiten, also habe ich einen selbst erstellt. Es hat vorher funktioniert, aber das war, als die Datenbank in den Controller gestellt wurde. Die Basis von dem, was ich versuche, ist, die Daten in irgendeiner Weise zu zeigen. Im Moment ist die Art und Weise, wie ich es zeige, nicht wirklich interessant, solange ich es zeigen kann. –

Ich sehe nicht den Zweck der localstorage, da Sie nicht tun Initialisieren Sie es, aber geben Sie das initialisierte Profil zurück. Wenn Sie nicht das gesamte Array übergeben, verlieren Sie möglicherweise Informationen, wenn Sie sich dazu entschließen, ein Profil hinzuzufügen. Auch die Schlüssel für localProfile und Profile Variablen sind die gleichen d Profil

Quelle

2017-04-06 13:28:35 codemano

Angular Service für localstorage

Antwort

Verwandte Themen