您的位置：首页 > Web前端 > JavaScript

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

2012-10-24 17:27 211 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Js 基于localStorage 制作的 &quot;我的便签本&quot;

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

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