localstorage的角度服務

因此，作爲一個項目，我被要求使用Angular製作一個小型應用程序。對於本地存儲，我想使用單獨的js作爲服務。localstorage的角度服務

我想要做的是使用控制器頁面給HTML頁面使用該服務調用localstorage的能力。這是因爲我想從多個html頁面訪問本地存儲。

我在下面發佈我的代碼，非常感謝。

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>

服務：

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

來源

2017-04-01 Alwin G

有在上面的代碼中一些失誤，

（i）您需要將DataService注入到控制器。

（ii）您可以只返回配置文件，因爲它是不使用$範圍

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

來源

2017-04-01 14:12:03 Sajeetharan

我改變了代碼，如你所說，它似乎確實解決一些我碰到了以前的問題。看到上面的代碼（它似乎運行沒有錯誤）。但是我現在遇到的問題仍然只顯示h1文本，而不是我試圖調用的數據。任何想法可以解決什麼？ –

你爲什麼要用|來做的getUser：數據？你的HTML有一些問題，不知道你需要顯示什麼 – Sajeetharan

這是我前一陣子的一個過濾器。這是與自制過濾器一起工作的要求之一，所以我創建了一個。它以前工作過，但是當把數據庫放入控制器時。我試圖做的基礎是以任何方式顯示數據。就目前而言，只要我能夠展示它，它並不是真的有趣。 –

我沒有看到的localStorage的目的，因爲你不初始化它，而是返回初始化的配置文件。除非您通過整個陣列，否則如果您決定添加配置文件，則可能會丟失信息。也爲localProfile和型材鍵變量是相同的，即輪廓

來源

2017-04-06 13:28:35 codemano

localstorage的角度服務

回答

相關問題