将 JSON 存储和还原到此 Ionic 应用程序的最有效方法是什么？

Question

我是 AngularJS 和 Ionic 开发的非常新手，想知道如何正确有效地存储 JSON 数据并在关闭和打开应用程序时恢复它。

我正在尝试制作的应用程序是一个简单的待办事项列表应用程序。我有一个名为 tasks 的列表，它采用 JSON 格式，可以由用户添加/删除。我想保存他们的待办事项，因为现在应用在重新打开后会重置。

这是我正在制作的应用程序的 app.js，我要保存和恢复的 tasks JSON 数据位于 TaskService 服务的底部。

// Ionic Checklist App
angular.module('checklist', ['ionic'])

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller('TasksCtrl', function ($scope, $ionicModal, TaskService) {
    $scope.tasks = TaskService.getTasks();

    $ionicModal.fromTemplateUrl('newTaskModal',
        {
            scope: $scope,
            animation: 'slide-in-up'
        }).then(function (modal) {
            $scope.modal = modal;
        });

    $scope.openNewTask = function () {
        $scope.modal.show();
    }

    $scope.closeNewTask = function () {
        $scope.modal.hide();
    }

    $scope.newTaskInput = {
        taskName: '',
        taskComments: ''
    }

    $scope.newTask = function () {
        console.log($scope.newTaskInput.taskName);
        TaskService.makeTask($scope.newTaskInput.taskName, $scope.newTaskInput.taskComments);
        $scope.closeNewTask();
    }

    $scope.deleteTask = function (task) {
        console.log(TaskService.getTasks());
        TaskService.deleteTask(task);
    }

})

.controller('TaskDetailCtrl', function ($scope, $stateParams, TaskService) {
    $scope.taskId = $stateParams.taskId;
    $scope.task = TaskService.getTask($scope.taskId);
})

.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

    $ionicConfigProvider.navBar.alignTitle('center');

    $stateProvider
        .state('tasks', {
            url: '/',
            templateUrl: 'tasks',
            controller: 'TasksCtrl'
        })
        .state('taskDetail', {
            url: '/:taskId',
            templateUrl: 'taskDetail',
            controller: 'TaskDetailCtrl'
        });

    $urlRouterProvider.otherwise("/");

})

.service('TaskService', function () {
    return {

        //Sample Tasks
        /*tasks: [
        {
            id: '1',
            name: 'Milk',
            comment: 'get it from the Frick Park Market'
        }, 
        {
            id: '2',
            name: 'Eggs',
            comment: 'get from chicken'
        }
        ],*/

        tasks: [],
        makeTask: function(name, comment) {
            var newId = this.tasks.length + 1;
            this.tasks.unshift({
                id: newId,
                name: name,
                comment: comment
            });
        },
        deleteTask: function (task) {
            console.log(task);
            console.log(this.tasks);
            console.log(this.tasks.indexOf(task));
            this.tasks.splice(this.tasks.indexOf(task), 1);
            for (i = 0; i < this.tasks.length; i++) {
                this.tasks[i].id = i+1;
            };
        },
        getTasks: function() {
            return this.tasks;
        },
        getTask: function (taskId) {

            for (i = 0; i < this.tasks.length; i++) {

                if (this.tasks[i].id == taskId) {
                    return this.tasks[i];
                }

            }

        }
    }
})

Answer 1

如果你不想使用数据库，最好的办法是使用类似https://github.com/simonlast/node-persist的东西

使用 NPM 安装 node-persist 可能是最简单的。

这是来自 GitHub 的示例：

var storage = require('node-persist');

//you must first call storage.init or storage.initSync
storage.initSync();

//then start using it
storage.setItem('name','yourname');
console.log(storage.getItem('name'));

var batman = {
    first: 'Bruce',
    last: 'Wayne',
    alias: 'Batman'
};

storage.setItem('batman',batman);
console.log(storage.getItem('batman').alias);

基本上这会写入文件而不是仅在浏览器中