首先我们来看下简易备忘录1.0版本，https://www.jianshu.com/p/de7c06a1e924，这版本是根据上一节的内容改进而成，上一节主要讲了DOM操作的增删查改，但是没有保存功能和动画，刷新一下就没了。而这一节，则是利用localstorage浏览器数据库来做，首先我们这一节主要有以下知识点：
1、localstorage的API使用，以及增删查改。
2、修改的小坑以及自己的错误。
3、使用动画的小坑。(精华)
4、源码
首先，国际惯例，先看一下效果图：
手机端
localstorage为浏览器的存储，是HTML5新增的功能，有些同学可能觉得新出的东西，没有书籍可以借鉴（这里是举个例子，比如HTML5从入门到精通就讲了这个，以及JS大犀牛，也讲了这个。），如果一门刚出的东西，没有资料，也没有博客讲解，那么最好的学习方法就是看官网啦！Look！https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
总结一下官网的API，例举出了以下的属性：
我们来看常用的方法:
localStorage.setItem('KeyName','Value');//添加
localStorage.removeItem('KeyName');//删除
localStorage.getItem('keyName');//获取
for(var i =0; i < localStorage.length; i++){
console.log(localStorage.getItem(localStorage.key(i)));
}//遍历出所有值
这是增删查，很遗憾，没有修改功能。setItem的KeyName和Value是两个参数，类似于Java的Map集合，一个名字一个值，删除名字，可以连值一起删除。
关于如何使用localStorage，我们打开浏览器，F12开发者工具如图：
F12页面
我们知道了增删查的方法之后，再套进自己需要的功能里，于是，我在代码里这样写：
添加：
//添加方法
function add() {
var input_value = input.value;
localStorage.setItem("Memo" + input_value,input_value);
}
代码讲解：
获取输入框的值添加到缓存里，这里前面加个Memo是为了让本应用和其他应用的缓存分别开，但是localstorage好像没有能过滤Key值的方法，只有一个过滤Value值的localStorage.hasOwnProperty('xxx')方法。
删除：
//删除方法
function remove(obj) {
localStorage.removeItem("Memo" + obj.previousSibling.data);
obj.parentNode.parentNode.removeChild(obj.parentNode);
}
代码讲解：
这是删除方法，obj为传的删除按钮，在我的JS添加的节点HTML结构中：
<input type='checkbox' class='"+flag+" checkbox' name='check'/>" + localStorage.getItem(item) +
"<button class='btn_remove' onclick='remove(this)'>删除</button>" +
"<button class='btn_update' onclick='update(this)'>修改</button>";
obj为删除这个按钮，previousSibling为之前的一个兄弟节点，但是是个对象，直接拼接是不行的，会显示[Object Text]这个报错，所以要加.data才能获取他的文本。然后字符串拼接，就可以删除啦~如图：
console.log(obj.previousSibling);//"xxx"
console.log("Memo" + obj.previousSibling);//Memo[object Text]
console.log("Memo" + obj.previousSibling.data);//Memoxxx
为什么后面要加.data呢，我们在之前的代码加了debugger后:
image.png
我们看到，鼠标移到这个属性的时候，会有个data属性，学过Java的同学会想到，根据面向对象，previousSibling.data就可以拿到值了，嗯，JS也是这样。我们取到值，再字符串拼接，就可以完成啦~请注意这里的previousSibling为获取上一个兄弟节点，如果你和HTML结构不同，请根据自身代码进行调整。
显示全部，两种实现方式：
localStorage.valueOf() //显示全部数据
localStorage.key(0) // 根据下标读取第N条数据
function show_data(){
for(var i = 0;i<localStorage.length;i++){
var content = document.createElement("p");
localStorage.getItem(localStorage.key(i))
main_content.appendChild(content);
}
}
function show_data(){
var content = document.createElement("p");
localStorage.valueOf();
main_content.appendChild(content);
}
二、修改：
function update(obj){
var f = prompt("请输入修改的信息",obj.previousSibling.previousSibling.data);
if(f){
localStorage.removeItem("Memo" + obj.previousSibling.previousSibling.data)
localStorage.setItem("Memo" + f ,f);
}else{
return
}
location.reload();
}
之前我的想法是，直接setItem覆盖，但是反复运用在一行数据上，会变成添加，而且删除功能会发生异常（我规定了格式的，"Memo" + input_value,input_value，这个可以自己规定）。因为修改了value的值导致无法删除。而且我的自定义格式也乱了。
这里的location.reload()则是我代码里的败笔，由于之前设计HTML结构的时候没考虑周全，把红色提示框放到主体里面去了，以下是错误代码
<div class="main_content" id="main_content">
<p class="main_hint"> 你当前还没有待办事项哦!</p>
<!--<p>这里是JS动态生成的节点</p>-->
</div>
用了这个HTML结构，导致无法用局部刷新:
var main_content = document.getElementById("main_content");
content.innerHtml = "";
show_data();
先把内容清空，再使用显示数据方法，便可以达到局部刷新效果。可是因为我HTML结构的不严谨，导致需要更改大量代码，这就是刚开始设计没考虑周全造成的。
三、动画：
//淡入
function show_animation(obj){
var num = 0;
var st = setInterval(function(){
num ++;
obj.style.opacity = num/10;
if(num>=10){
clearInterval(st);
}
},80)
}
//淡出
function hide_animation(obj){
var num = 10;
var st = setInterval(function(){
num --;
obj.style.opacity = num/10;
if(num<=0){
clearInterval(st);
}
},80)
}
这代码是很常见的JS代码，使用setInterval()是因为for循环不能控制时间。代码是没问题，但是实际运用，就有问题啦~我们往下看：
然后删除和添加/显示所有，套用动画：
function remove(obj) {
localStorage.removeItem("Memo" + obj.previousSibling.data);
hide_animation(obj.parentNode);
obj.parentNode.parentNode.removeChild(obj.parentNode);
}
删除问题动态图
function remove(obj) {
obj.disabled = true;
localStorage.removeItem("Memo" + obj.previousSibling.data);
hide_animation(obj.parentNode);
}
function hide_animation(obj){
var num = 10;
var st = setInterval(function(){
num --;
obj.style.opacity = num/10;
if(num<=0){
obj.parentNode.removeChild(obj);
clearInterval(st);
}
},80)
}
我们改进了代码后，因为setInterval是个循环，我们放到循环里面结束那里，再执行删除方法，就可以完美搞定啦~hide_animation()方法里是obj.parentNode.removeChild(obj);而不是obj.parentNode.parentNode.removeChild(obj.parentNode);原因是因为此时的obj已经是obj.parentNode（参数）了。obj.disabled = true;是为了阻止用户反复点击按钮而造成报错。
至于添加的淡入动画也会出现bug：
淡入动画BUG
代码如下：
function show_data(){
for(var i = 0;i<localStorage.length;i++){
var content = document.createElement("p");
localStorage.getItem(localStorage.key(i));
show_animation(main_content.appendChild(content));
}
}
function show_animation(obj){
var num = 0;
var st = setInterval(function(){
num ++;
obj.style.opacity = num/10;
if(num>=10){
clearInterval(st);
}
},80)
}
首先，添加会出现闪烁效果，原因就在于那80毫秒，程序往下走，文字已经加载完了，才执行淡入动画，显然不行，于是我们可以这样改：
function show_data(){
for(var i = 0;i<localStorage.length;i++){
var content = document.createElement("p");
localStorage.getItem(localStorage.key(i))
main_content.appendChild(content);
}
}
function show_animation(obj){
var num = 0;
obj.style.opacity = num;
var st = setInterval(function(){
num ++;
obj.style.opacity = num/10;
if(num>=10){
clearInterval(st);
}
},80)
}
添加一行obj.style.opacity = num;让它透明度改为0，即可解决该闪烁问题。
网友评论