使用JavaScript和Angular将元素保存在本地存储中

Question

我目前正在尝试创建此Angular应用程序，您可以在其中将名片“收藏”到本地内存中。 我在将clicked元素实际推送到浏览器的本地内存时遇到问题。

另外，我认为我不是以非常有角度的方式进行操作。

您可以通过单击星标元素来帮助我将卡推入本地存储器吗？ 成功推送后，该元素应将颜色更改为黄色。

我将其他几个问题用作资源，但大多数问题都使用了ngStorage等其他模块。

如果您使用ngStorage或其他任何angular指令，请解释一下，以便我真正了解它的功能？

这是小型应用程序的小提琴： 小型应用程序

Answer 1

尝试这样：

安装凉亭angular-local-storage

bower install angular-local-storage --save

像这样的控制器js

angular.module('tempApp', ['LocalStorageModule'])
  .controller('DataCtrl', function ($scope, $location, localStorageService) {
    console.log('DataCtrl');

    $scope.add = function() {
        localStorageService.set("msg", "hello world");
    }

  });

引用此链接angular-local-storage

Answer 2

我认为您做错了很多事情，这段代码虽然不完美，但是可以根据您的需要做一个很好的指导。

例如，您没有为函数saveStar使用$ scope，没有使用属于所有开始的ID，而是分配了localStorage.setItem而不是getItem来获取输出var，等等。

<div class= "well well-lg col-md-4 col-sm-6 col-xs-6"  ng-repeat="person in employees | filter: searchBox">
            <i class="fa fa-star fa-2x" aria-hidden="true" id="star"
             ng-style="set_color(person.id)"
             ng-click="saveStar(person.id)"></i>
                <p>{{person.id}}</p>
                <p>{{person.name}}</p>
                <p>{{person.username}}</p>
        <p>{{person.email}}</p>
        <p>{{person.address.city}}</p>


            </div>

看一下ng-style="set_color(person.id)"和ng-click="saveStar(person.id)"现在检查控制器

$scope.saveStar = function(e){      
    $scope.output = localStorage.getItem('localStar');
        localStorage.setItem('localStar', e); 
    $scope.$apply();
}   
  $scope.set_color = function (e) {  
  if ( e == $scope.output){
       return { color: '#ffd000' };
        }else{
            return { color: "red" };
        }

}

这样双击即可使用。