每天一个jquery插件-做一个便签
做一个便签
嗯，随便逛插件的时候试着做一下，复习了一下sessionStorage这类缓存的使用，然后后面打算研究一下IndexDB的使用，这个算是入门吧
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做一个便签</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
#div{
position: fixed;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid lightgray;
border-radius: 5px;
overflow: auto;
}
.item{
background-color: rgb(241,241,128);
margin: 10px;
border: 1px solid lightgray;
width: 200px;
height: 300px;
float:left;
position: relative;
border-radius: 5px;
overflow: hidden;
}
.head{
position: absolute;
width: 100%;
top: 0;
height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
text-indent: 20px;
font-size: 12px;
background-color: rgb(228,190,50);
}
.tarea{
position: absolute;
top: 30px;
width: 100%;
bottom: 30px;
overflow: hidden;
outline: none;
resize: none;
border: none;
text-indent: 12px;
font-size: 12px;
background-color: transparent;
}
.add{
position: absolute;
border:2px solid white;
bottom: 0px;
background-color: rgb(228,190,50);
height: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
left: 0;
cursor: pointer;
}
.delete{
position: absolute;
border:2px solid white;
bottom: 0px;
background-color: rgb(228,190,50);
height: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
left: 50%;
cursor: pointer;
}
.add:active,.delete:active{
opacity: 0.8;
}
</style>
</head>
<body>
<div id="div">
<div class="item" data-index="0">
<div class="head">
便签
</div>
<textarea class="tarea">写点什么……</textarea>
<div class="add">新增</div>
<div class="delete">删除</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var str =sessionStorage["data"];
var arrs = JSON.parse(str);
if(arrs&&arrs.length>0){
$(".item").remove();
arrs.forEach(item=>{
var $dom = $('<div class="item" data-index="'+item.index+'"><div class="head">便签</div><textarea class="tarea">'+item.txt+'</textarea><div class="add">新增</div><div class="delete">删除</div></div>');
$dom.appendTo($("#div"))
})
}
})
$(function(){
$(document).on('click','.add',function(){
var $par = $(this).parent().clone();
var index = new Date().getTime();
$par.attr("data-index",index);
$par.appendTo($("#div"));
})
$(document).on('click','.delete',function(){
$(this).parent().remove();
})
$(document).on('input porpertychange','.tarea',function(){
//这里监控所有数据，然后给缓存成一个json文件存入缓存之中；
var arr = $(".item").arr();
var arrs = [];
arr.forEach(item=>{
var temp = {
index:item.attr("data-index"),
txt:item.find(".tarea").val()
}
arrs.push(temp);
})
var str = JSON.stringify(arrs);
sessionStorage["data"] = str;
})
})
$.prototype.arr = function(){
var that = this;
var arr = [];
for(var i = 0;i<that.length;i++){
var $dom = $(that[i]);
arr.push($dom);
}
return arr;
}
</script>
思路解释
- 就是把数据处理成json数据然后存入缓存中，要用的时候拿到手再重新变成对象就行了
转载：https://blog.csdn.net/weixin_44142582/article/details/115706701
查看评论