Angular Js - LocalStorage

时间:2017-07-02 22:26:58

标签: javascript angularjs local-storage

我是Angular的新手, 我有一个简单的问题要转发到AngularJS中的LocalStorage。 我有一个json文件来获取DOM的数据,我已经在控制台上运行并显示了LocalStorage.getItem。

现在我需要弄清楚如何在点击一个简单的按钮后将LocalStorage放入Dom中。

这是我的文件控制器:

angular.module('stock').controller('checkListController', [
    '$http',
    'checkListService',
    function checkListController($http, checkListService) {
        'use strict';

        var self = this;

        this.checkList = [];
        $http.get('api/checklist.json').then(function (result) {
            self.checkList = result.data.items;
        });

        this.checkListMissing = [];
        $http.get('api/checklist-missing.json').then(function (result) {
            self.checkListMissing = result.data.items;
        });


        var addList = [];
        var missingItemList = [];
        this.addItem = function (item) {
            addList.push(item);
            localStorage.setItem('item', JSON.stringify(addList));
            missingItemList = addList;
            console.log(missingItemList);
        }

    }
]);

这有什么意义吗? 谢谢大家

1 个答案:

答案 0 :(得分:0)

    angular.module('stock').controller('checkListController', [ '$http','$window', 'checkListService', function checkListController($http,$window, checkListService) { 'use strict';

        var self = this;

        this.checkList = [];
        $http.get('api/checklist.json').then(function (result) {
            self.checkList = result.data.items;
        });

        this.checkListMissing = [];
        $http.get('api/checklist-missing.json').then(function (result) {
            self.checkListMissing = result.data.items;
        });


        var addList = [];
        var missingItemList = [];
        this.addItem = function (item) {
            addList.push(item);
            localStorage.setItem('item', JSON.stringify(addList));
            missingItemList = addList;
            console.log(missingItemList);
        }
    //this function will call when a button will click
        $scope.showJsonContent = function() {
                         $scope.jsonDataFrmLclStorage = JSON.parse($window.localStorage.getItem("item"));
                     }

    }
    ])

HTML need for button which will call the showJsonContent function expose in scope would be below
<button data-ng-click="showJsonContent()" >Show Content</button>
这将显示json数据的整个对象 {{jsonDataFrmLclStorage}}