<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todoList待辦事項</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" placeholder="添加ToDo">
</section>
</header>
<section>
<h2>正在進行<span id="rodocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已經完成<span id="rodocount"></span></h2>
<ul id="donelist">
</ul>
</section>
<footer>
Copyright ©2014 todolist.cn
</footer>
<script>
var todolist = [{
title: '我今天吃了八個饅頭',
done: false
}, {
title: '我今天學習jq',
done: false
}, ];
localStorage.setItem("todo", JSON.stringify(todolist));
//本地的數組轉換為json.stringfy();
var data = localStorage.getItem("todo");
console.log(typeof data);
//擷取本地存儲資料需要把字元串資料轉換為對象形式json.parse
data = JSON.parse(data);
console.log(data);
$(function() {
//按下回車 把完整資料存儲到本地存儲裡面
$("#title").on("keydown", function(event) {
if (event.keyCode === 13) {
//先讀取本地存儲原來的資料
var local = getDate();
console.log(local);
//把local數組更新元素
local.push({
title: $(this).val(),
done: false
});
//把這個數組給本地存儲
saveDate(local);
}
})
//讀取本地存儲的資料
function getDate() {
var data = localStorage.getItem("todolist");
if (data !== null) {
//本地存儲裡面的資料是字元串格式的
return JSON.parse(data);
} else {
//傳回一個數組
return [];
}
}
//儲存資料
function saveDate(data) {
localStorage.setItem("todolist", JSON.stringify(data));
}
});
</script>
</body>
</html>
運作結果
![SpringMVC 傳回json的兩種方式[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)