前端学习（1045）:todolist本地存储加载到页面
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1045）:todolist本地存储加载到页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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.parsedata = JSON.parse(data);console.log(data);$(function() {//todolist渲染到界面load();//按下回車 把完整數據存儲到本地存儲里面$("#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));}//渲染數據function load() {//讀取本地的數據var data = getDate(data);console.log(data);//遍歷之前清空$("ol").empty();//遍歷整個數據$.each(data, function(i, n) {console.log(n);$("ol").prepend("<li><input type='checkbox'><p>" + n.title + "</p><a href='javascript:;'></a></li>");})}});</script>
</body></html>
運行結果
總結
以上是生活随笔為你收集整理的前端学习（1045）:todolist本地存储加载到页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql英文怎么发音_英文字母和汉语拼
- 下一篇： 前端学习（1190）:事件修饰符