Js 基于localStorage 制作的 "我的便签本"

最新推荐文章于 2022-02-26 20:31:19 发布

ilvu999

最新推荐文章于 2022-02-26 20:31:19 发布

阅读量954

点赞数

分类专栏： javascript

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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练习

ilvu999

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js 基于localStorage 制作的 "我的便签本"

Js 基于localStorage 制作的 "我的便签本"效果预览:http://jsfiddle.net/dtdxrk/LAtaF/embedded/result/我的便签1.用localStorage存储数据比cookie存储空间大缺点就是基于支持html5的浏览器2.用toString()把数组转换成string存入localStorage3.把localSt
复制链接

扫一扫