存储在Localstorage； 但是功能太少，比如定时无法实现 store.js比较灵活，用它.
确定js代码能和html代码正常交互注意form表单里面的submit才有效果preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。定义变量，然后相对的定义函数，这样会非常的清晰，层层嵌套，能溯源代码在多个函数层层调用的时候，可以使用console.log(‘ a′, a)来测试是否衔接正确 使用循环添加自定义属性来表示itemdelete按钮没有效果的原因：jquery不会自动的更新文档流，动态与静态的区别，所以我们需要在遍历之后，进行变量的赋值$(‘.anchor.delete’)多个类名的查找不要加空格，否则会形成层级查找jquery不会自动去绑定value的变化，需要手动的在每次文档变化后添加事件。把变化之后的内容添加到监控事件的监控源中去{}是对象，[]是数组注意作用域的问题，比如new_task就应该每天点击都要加载一下，所以不要写在全局里面。思路：get输入值，push进变量，更新本地存储；同时建立模板，在模板中循环插入输入值 存：添加到Array->json->localstorage； 取：json->push成array->迭代到html中； 删除：点击->index->在array中删除->更新localstorage 就是它，我的天，de,de,de,只怪自己水平不够
if(!data || !index)return;而且引出一个问题，就是只能删除一个，之后就没有继续监听该事件了
;(function(){ 'use strict'; var $form_add_task = $('.add-task') , task_list = [] , $input , $delete_task ; init(); $form_add_task.on('submit', on_add_task_submit) function on_add_task_submit(e){ var new_task = {}; // Disable the default behavior e.preventDefault(); // Get new Task's value $input = $(this).find('input[name=content]'); new_task.content = $input.val(); // New task if it's value is empty,then return directly,otherwise continue if (!new_task.content) return; // In the new task if (add_task(new_task)){ $input.val(null); } } // Find and lisen all's button onclick event function listen_task_delete(){ $delete_task.on('click',function(){ var $this = $(this); // 找到删除按钮所在的task元素 var $item = $this.parent().parent(); var index = $item.data('index'); // 确认删除 var tmp = confirm('Are you sure delete?') tmp ? delete_task(index) : null ; }) } function add_task(new_task){ // Push new_task into task_list task_list.push(new_task); // Update localStorage // store.set('task_list',task_list); refresh_task_list(); return true; } /* * 刷新localStorage数据并渲染模板 * */ function refresh_task_list() { store.set('task_list', task_list); render_task_list(); } /*delete one Task*/ function delete_task(index) { /*如果没有index 或者index不存在则直接返回*/ if (index === undefined || !task_list[index]) return; delete task_list[index]; /*更新localStorage*/ refresh_task_list(); } function init(){ task_list = store.get('task_list') || []; // store.clear(); if(task_list.length){ render_task_list(); } } /* * 渲染所有Task模板 * */ function render_task_list(){ var $task_list = $('.task-list'); $task_list.html(''); for(var i=0;i<task_list.length;i++){ var $task = render_task_item(task_list[i],i); $task_list.append($task); } $delete_task = $('.anchor.delete'); listen_task_delete(); } function render_task_item(data,index){ if(!data || !index) return; // Define pattern var list_item_tpl = '<div class="task-item" data-index="' + index + '">' + '<span><input type="checkbox"></span>' + '<span class="task-content">' + data.content + '</span>' + '<span class="fr">' + '<span class="anchor delete"> 删除</span>' + '<span class="anchor"> 详情</span>' + '</span>' + '</div>'; return $(list_item_tpl); } })();此时实现了提交和删除的功能
