序言

本章我们将使用html5的本地存储的API持久化我们的任务清单。

1. LocalStorage

localStorage是HTML5中给客户端提供了基于浏览器的存储方法。Angular中也对localStorage做了一层服务的封装，即localStorage。
Angular中的localStorage主要就两个方法去设置与获取本地存储中的值：

localStorage.setItem(key, value);
localStorage.getItem(key);

本地存储中的value只能保存字符串，如果我们需要对JSON对象进行持久化保存，则需要使用JSON.parse和JSON.stringify做序列化与反序列化的操作。

2. 改造我们的Service

我们将对我们的TaskService进行改造，增加对于本地存储的接口，用于持久化保存我们的相关任务清单。

2.1 获取与保存任务

我们对TaskService中，先添加对于JSON序列化与反序列化的代码


var STORAGE_ID = 'todos';

_getFromLocalStorage: function () {
  return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
},

_saveToLocalStorage: function (task) {
  localStorage.setItem(STORAGE_ID, JSON.stringify(task));
},

然后编写get与insert方法:

2.2 获取任务列表数据

get方法只需要简单的将任务清单列表从本地存储中获取后，复制与当前的tasks数组再进行返回即可。

        get: function () {
          return angular.copy(service._getFromLocalStorage(), service.tasks);
        },

2.3 保存任务列表数据

insert方法在插入一条新的数据后，将整个tasks数组重新覆写于本地存储。

        insert: function (task) {
          service.tasks.push(task);
          service._saveToLocalStorage(service.tasks);
        }

2.4修改对应的控制器代码

修改controller初始化的vm.tasks绑定逻辑
我们将通过TaskService的方法暴露实际的tasks数据用于外部控制器的绑定。
通过修改init方法，调整vm.tasks的赋值绑定逻辑。

        function init(){
            vm.status =  $routeParams.status||"";
            vm.statusFilter =_filterByStatus(vm.status);
            vm.tasks = TaskService.get();
        }

** 通过TaskService.insert的方法，操作增加任务记录**
调整后，所有对于TaskService中的tasks数组进行操作都需要通过TaskService对外暴露的接口方法而不是直接与之前一样直接操作vm.tasks或TaskService.tasks进行操作。

        function addTask(){
            var newTask = {
                title: vm.newTask,
                completed:false
            };

            if(!newTask.title){
                return false;
            }
            
            TaskService.insert(newTask);
            vm.newTask = "";
          
        }

修改后可刷新页面查看最新的效果现在，所有新增的记录在页面刷新后还依旧会出现在浏览器中。

添加新的任务

刷新、关闭浏览器后重新打开浏览器后添加的任务依旧存在于清单上

2.5 添加删除功能

原有的删除功能，我们实在controller中进行实现的：


        function  removeTask(task){
            vm.tasks.splice(vm.tasks.indexOf(task), 1);
        }

现在我们将相关实现放置于TaskService中达到“内聚”的目的。我们通过向TaskService中添加delete方法，用于删除指定task。

        delete: function (task) {
          service.tasks.splice(service.tasks.indexOf(task), 1);
          service._saveToLocalStorage(service.tasks);
        }

最后，在调整原有controller中的方法，使用TaskService.delete方法进行删除操作。

        function  removeTask(task){
            TaskService.delete(task);
        }

2.6 编辑功能

之前我们双击任务记录后便可以对任务进行更新编辑操作，其实现逻辑也是编写在controller中且没有进行任何持久化的:

        function editTask(task){
            vm.editedTask = task;
        }

我们同样在TaskService中增加一个put方法用于对指定索引的任务进行修改操作并进行持久化操作:

        put: function (task, index) {
          service.tasks[index] = task;
          service._saveToLocalStorage(service.tasks);
        }

原先在controller中因为是通过双向绑定达到的更新效果，所以并没有保存时间的概念。
现在我们需要额外在controller中增加一个方法用于保存当前编辑任务记录。
saveEdit方法用于获取当前task在整个tasks数组中位置，使用TaskService的put的方法去更新与持久化。

        vm.saveEdit = saveEdit;

        function saveEdit(task){
            TaskService.put(task, vm.tasks.indexOf(task));
            vm.editedTask = null;//提交后清空当前的editedTask的编辑状态
        }

对应的我们也需要调整视图模板文件中的触发指令,原有编辑表单如下

<form ">
  <input class="edit" ng-trim="false"   ng-model="task.title" />
</form>

我们现在对表达增加两个触发持久化的动作事件：

按回车提交表单更新的时候
编辑后，鼠标离焦点击另外一条任务事件的时候也默认为提交

<form ng-submit="vm.saveEdit(task)">
   <input class="edit" ng-trim="false"  ng-blur="vm.saveEdit(task)" ng-model="task.title" />
 </form>

我们通过在form上增加ng-submit指令与在input上增加ng-blur的指令处理我们期望的事件操作。

2.7 最终的task.service.js

抽离完了所有功能后，最终版本的task.service.js代码清单如下:

(function ()
{
    'use strict';

    angular
        .module('todomvc')
        .service('TaskService', TaskService);

    TaskService.$inject = [];
    function TaskService()
    {
      var STORAGE_ID = 'todos';

      var service = {


        tasks:[],

        _getFromLocalStorage: function () {
          return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
        },

        _saveToLocalStorage: function (task) {
          localStorage.setItem(STORAGE_ID, JSON.stringify(task));
        },
        get: function () {
            return angular.copy(service._getFromLocalStorage(), service.tasks);
        },

        insert: function (task) {
          service.tasks.push(task);
          service._saveToLocalStorage(service.tasks);
        },
        delete: function (task) {
          service.tasks.splice(service.tasks.indexOf(task), 1);
          service._saveToLocalStorage(service.tasks);
        },
        put: function (task, index) {
          service.tasks[index] = task;
          service._saveToLocalStorage(service.tasks);
        }
      }// end of service
      return service;

    }//end of taskService
})();

到这里基本上所有的对于Controller业务逻辑改造全部完成了，我们将所有对于实体Task的操作全部移至TaskService中。Controller只负责与视图操作与操作TaskService提供的API达到MVC职责分离的目的，降低了功能代码的耦合性。
另外一方面，我们将所有对于tasks任务清单数组的操作的代码全部放在task.service.js中进行操作，同样提高了对于task实体功能的内聚性目的，将来所有的修改都只需要改动service中内部的实现逻辑即可，并不会去影响相关controller的代码。