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

【问题标题】：Saving an element in local storage with JavaScript and Angular使用 JavaScript 和 Angular 在本地存储中保存元素
【发布时间】：2018-03-14 21:39:39
【问题描述】：

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

此外，我不认为我正在以一种非常Angular 的方式来做这件事。

你能帮我通过点击星号将卡片推送到本地内存吗元素？成功推送后，该元素应将颜色变为黄色。

我使用了其他几个问题作为资源，但其中大多数都使用了额外的模块，例如ngStorage。

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

这是一个小应用程序的小提琴： Small Application

【问题讨论】：

你的 'ng-click' 没有在你的 jsfiddle 中触发
您真的需要将元素保存在localStorage 中吗？你的小提琴有很多问题，我已经尝试解决它们 - check if it works for you。
我已经扩展了@StanislavKvitash 的答案以将最喜欢的 emp 存储在 locaStorage 中。 jsfiddle.net/ashgab/g96hmf04/2
@Ashish 你的小提琴没有打开，Stanislav Kvitash 的小提琴没有按照我的意愿将我的clicks 存储在本地存储中。
@ZombieChowder 检查更新版本jsFiddle

标签： javascript jquery angularjs frontend

【解决方案1】：

试试这样：

安装 bower 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

【讨论】：

【解决方案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" };
        }

}

这样双击就可以了。

【讨论】：