使用localStorage写一个简单的备忘录 |
您所在的位置：网站首页 › js实现备忘录 › 使用localStorage写一个简单的备忘录 |
使用localStorage写一个简单的备忘录
|
使用html+js实现一个简单的备忘录，主要体会一下localStorage的用法。 先看看效果图：
在输入框中输入文字，点击保存按钮，文本内容会在下放展示出来， 然后刷新下浏览器，会发现文本内容不会丢失，这是因为文本内容被保存到localStorage中了， 可以理解为保存到了浏览器的Cookie中。再点击"清空本地存储",会发现下方的文本都没有了。 -------------------------------------------------------------------------------------- 代码： 1 DOCTYPE html> 2 3 4 5 HTML5-任务列表 6 7 8 9 10 11 12 13 任务列表 14 15 16 17 18 19 // 从本地存储加载任务列表 20 var msgList = localStorage.getItem("msgList"); 21 22 if (msgList !== null && msgList !== undefined && msgList != '') { 23 // 展示任务列表 24 document.getElementById("todoList").innerHTML = msgList; 25 } 26 // 添加并保存单个任务 27 $("#saveMsg").click(function () { 28 var todoMsg = document.getElementById("todoMsg").value; 29 if (todoMsg == null || todoMsg == '') { 30 alert("请输入任务") 31 return; 32 } 33 var todoMsgHtml = '任务:' + todoMsg + ''; 34 // 追加到任务列表 35 msgList = (msgList == null ? '' : msgList) + todoMsgHtml; 36 localStorage.setItem("msgList", msgList); 37 // 刷新任务列表 38 document.getElementById("todoList").innerHTML = msgList; 39 }); 40 // 清空任务列表并刷新浏览器 41 $("#clearMsg").click(function () { 42 localStorage.clear(); 43 document.getElementById("clearMsg").innerHTML = ""; 44 location.reload(); 45 }); 46 47 48 49------------------------------------------------------------------------------------------------------ 总结：功能简单，主要体会下localStorage的用法。 下一步打算写个漂亮点的任务看板放到云服务器上给大家免费试用，无需登录即可快速创建任务(基于浏览器Cookie存储)， 同时具备微信扫码登录功能，可将任务同步到服务器永久保存，也可以一键导出任务列表到本地磁盘。
|
【本文地址】