Js 基于localStorage 制作的 "我的便签本"
Js 基于localStorage 制作的 "我的便签本"
效果预览:
http://jsfiddle.net/dtdxrk/LAtaF/embedded/result/
我的便签
1.用localStorage存储数据 比cookie存储空间大 缺点就是基于支持html5的浏览器
2.用toString()把数组转换成string存入localStorage
3.把localStorage数据提取显示出来 修改数据 保持到localStorage
4.这个实例练习的更多的是对数组的操作 split()把字符串分割为数组 splice()添加修改删除数组
5.encodeURIComponent()对数据编码 decodeURIComponent()解码
6.由于用的是innerHTML输出li列表 没有做过滤html标签的处理 str含有html标签时会显示成html 由于innerText的兼容性问题 这里没有做特殊处理 可以用jquery的text解决
7.chrome和firefox是可以本地预览的 ie8 9需要启动本地服务http://localhost/才支持window.localStorage
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <style type="text/css"> 7 *{margin:0;padding: 0; list-style: none;} 8 body{ font:12px '微软雅黑', arial, \5b8b\4f53, sans-serif;background: #efefef;line-height: 1.5} 9 #text{background: green;color: #fff;padding-bottom: 10px;} 10 11 #notepad{width: 400px;height: 400px;margin: 50px auto;border: 1px solid #ccc;position: relative;background-color: #666;} 12 #notepad h1{line-height: 35px;background-color:#582900; color: #fff;font-size: 18px;padding: 0 20px;overflow:hidden;} 13 #notepad h1 span{float: right;cursor: pointer;} 14 15 #content{display:none;z-index: 100;color:#fff;position: absolute;width: 400px;height: 400px;left:0;top:0;background-color: #666;} 16 #content h1 a{color: #fff;cursor: pointer;} 17 #content h1 a:hover{color: #fff;} 18 #content #textarea{padding: 5px;border:0;overflow-x: hidden;overflow-y: hidden;height:355px;width:390px;font-size: 14px;line-height: 1.5;color: #333;} 19 #save{float: right;margin-right: 10px;} 20 #save{} 21 22 #list{overflow: hidden;margin:15px;height:330px;overflow-x: hidden;overflow-y: auto;z-index: 99;} 23 #list li{cursor: pointer;padding:5px 15px;height:20px;background-color:#fff6c1;border-bottom: 1px solid #fea800;} 24 #list span{float:right;} 25 #list li:hover{background-color:#ffa800;color: #fff;} 26 </style> 27 </head> 28 <body> 29 <div id="text"> 30 <h1>我的便签</h1> 31 <p>1.用localStorage存储数据 比cookie存储空间大 缺点就是基于支持html5的浏览器</p> 32 <p>2.用toString()把数组转换成string存入localStorage</p> 33 <p>3.把localStorage数据提取显示出来 修改数据 保持到localStorage</p> 34 <p>4.这个实例练习的更多的是对数组的操作 split()把字符串分割为数组 splice()添加修改删除数组</p> 35 <p>5.encodeURIComponent()对数据编码 decodeURIComponent()解码</p> 36 <p>6.由于用的是innerHTML输出li列表 没有做过滤html标签的处理 str含有html标签时会显示成html 由于innerText的兼容性问题 这里没有做特殊处理 可以用jquery的text解决</p> 37 <p>7.chrome和firefox是可以本地预览的 ie8 9需要启动本地服务http://localhost/才支持window.localStorage</p> 38 </div> 39 40 <div id="notepad"> 41 <h1><span id="add">+</span>我的便签</h1> 42 <ul id="list"></ul> 43 <div id="content"> 44 <h1> 45 <a id="del">×删除</a> 46 <a id="save">√保存</a> 47 </h1> 48 <textarea id="textarea"></textarea> 49 </div> 50 </div> 51 52 <script type="text/javascript"> 53 (function(){ 54 var storage = window.localStorage; 55 var str; 56 57 //判断storage的key notepad 是否为空 58 if(!storage.getItem("notepad")){ 59 str = []; 60 }else{ 61 str = storage.getItem("notepad").split(","); 62 } 63 64 //取得日期 65 var date = new Date(), 66 time = (date.getMonth()+1)+"月"+date.getDate()+"日"; 67 68 //获取元素id 69 var add= document.getElementById("add"), 70 list = document.getElementById("list"), 71 content = document.getElementById("content"), 72 save = document.getElementById("save"), 73 del = document.getElementById("del"), 74 textarea = document.getElementById("textarea"); 75 76 //刷新li列表 77 function refreshList(){ 78 storage.setItem("notepad", str.toString()); //把数组转换成string存入notepad 79 80 list.innerHTML =""; 81 82 //创建li列表 83 for(var i=0; i<str.length; i++){ 84 if(str==0) return; 85 var li = document.createElement("li"), 86 title = decodeURIComponent(str[i].split("=")[1]).substring(0,20), //标题 87 t = str[i].split("=")[0]; 88 li.innerHTML = '<span>'+ t +'</span>'+title; 89 list.appendChild(li); 90 } 91 92 //点击li显示内容 93 var lis = list.getElementsByTagName("li"); 94 for (var i = 0; i<lis.length; i++) { 95 lis[i].onclick = function(){ 96 var con = str[i].split("=")[1]; //标题 97 var num = i; 98 return function(){ 99 content.style.display = "block"; 100 save.index = num; //把li的index传给save按钮 101 textarea.focus(); 102 textarea.value = decodeURIComponent(con); 103 }; 104 }(i); 105 } 106 107 } 108 109 save.onclick = function(){ 110 content.style.display = "none"; 111 var con = time+"="+encodeURIComponent(textarea.value); 112 113 if(save.index ==undefined && textarea.value=="") return; 114 115 //如果li内容为空 从str里删除 116 if(save.index !=undefined && textarea.value==""){ 117 str.splice(save.index, 1); 118 refreshList(); 119 return; 120 }; 121 122 //修改数据 123 if(save.index != undefined){ 124 str.splice(save.index, 1, con); 125 refreshList(); 126 return; 127 }; 128 129 //第一项插入数据 130 if(save.index == undefined) { 131 if(str.length === 0){ 132 str[0] = con; 133 }else{ 134 str.unshift(con); 135 } 136 }; 137 138 console.log(str); 139 refreshList(); 140 } 141 142 add.onclick = function(){ 143 textarea.value = ""; 144 save.index = undefined; 145 content.style.display = "block"; 146 textarea.focus(); 147 } 148 149 del.onclick = function(){ 150 if(confirm("确定要删除这条便签吗?")){ 151 if(save.index == undefined){ 152 153 }else{ 154 str.splice(save.index, 1); 155 }; 156 refreshList(); 157 content.style.display = "none"; 158 }else{ 159 return; 160 }; 161 } 162 163 refreshList(); 164 165 })(); 166 </script> 167 </body> 168 </html>
分类: JavaScript练习