## 添加和查看事項和刪除事項
### 1.引入 store.js
> store.js 是一個兼容所有瀏覽器的 LocalStorage 包裝器。
store.js封裝了localStorage的一系列API。
~~~javascript
// Store current user
store.set('user', { name:'Marcus' });
// Get current user
store.get('user');
// Remove current user
store.remove('user');
// Clear all keys
store.clearAll();
// Loop over all stored values
store.each(function(value, key) {
console.log(key, '==', value)
});
~~~
> 使用時，我們只需要將store.js引入項目即可。
~~~html
<script type="text/javascript" src="js/store.legacy.min.js" ></script>
~~~
### 2.編寫添加、查看和刪除功能
~~~javascript
$(function(){
// store.set('bizzbee',{name:'bizzbee',age:26});
// console.log(store.get('bizzbee'));
function lg(a){
console.log(a);
}
var $form_add_task = $('.add-task');
var $delete_task;
var task_list = [];
init();
/*初始化頁面*/
function init(){
task_list = store.get('task_list');
if(task_list.length){
for(var i=0;i<task_list.length;i++){
if(task_list[i]==null){
delete task_list[i];
}
}
}
lg(task_list);
render_task_list();
}
$form_add_task.on('submit',function(e){
var new_task = {};
/*阻止默認行為*/
e.preventDefault();
var $input = $(this).find('input[name=content]');
new_task.content = $input.val();
if(!new_task.content){
return;
}
lg(new_task);
if(add_task(new_task)){
$input.val('');
};
});
/*新增task的方法*/
function add_task(new_task){
task_list.push(new_task);
refresh_task_list();
return true;
}
function listen_task_delete(){
$delete_task.on('click',function(){
$this = $(this);
$item =$this.parent().parent();
var index = $item.data('index');
var tmp = confirm('確定要刪除嗎？');
tmp?delete_task(index):null;
})
}
function delete_task(index){
if(!task_list[index]) return;
delete task_list[index];
refresh_task_list();
}
function refresh_task_list(){
store.set('task_list',task_list);
render_task_list();
}
function render_task_list(){
var $task_list = $('.task-list');
$task_list.html('');
for(key in task_list){
var item = task_list[key];
/*拼接每一項HTML*/
var $task = render_task_item(item,key);
$task_list.append($task);
}
$delete_task = $('.action.delete');
listen_task_delete();
}
function render_task_item(data,index){
if(!data||!index){
return;
}
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="action delete">刪除</span>'+
'<span class="action detail">詳細</span>'+
'</span>'+
'</div>';
return $(list_item_tpl);
}
})
~~~
新增的CSS
~~~css
/*刪除和詳細按鈕*/
.action{
margin: 0 3px;
color:#888;
font-size:90%;
}
.action:hover{
color: #333;
}
.fr{
float: right;
}
~~~
