Js 基于localStorage 制作的 "我的便签本"
<div id="cnblogs_post_body">效果预览: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
<div class="cnblogs_code">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">&times;删除</a> 46 <a id="save">&radic;保存</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.split("=")[1]).substring(0,20), //标题 87 t = str.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.onclick = function(){ 96 var con = str.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>
页:
[1]