嗯，随便逛插件的时候试着做一下，复习了一下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>
思路解释
Title:MicrosoftASP.NETMayDiscloseWebDirectorytoRemoteUsersinCertainCases De...
写这篇文章是因为之前有一次删库操作，需要进行批量删除数据，当时没有控制好删...
macOS 软件包管理系统 Homebrew 近日收到了一个重大更新，其 3.0.0 版本引入了对...
script标签 在HTML5中script主要有以下几个属性：async，defer，charset，src，t...
在PHP中有两套正则表达式函数库，两者功能相似，只是执行效率略有差异： 一套是...
每当我们谈及浏览器时，总会围绕性能、扩展这样的话题展开。的确，性能决定了软...
本文实例为大家分享了微信小程序自定义左上角胶囊样式的具体代码，供大家参考，...
想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://...
RadonDB深入学习 之前深入学习了一波xenon（MySQL高可用组件），近期打算深入学...
在 JS 中，对于某个由 JSON 对象组成的数组，例如： var test = [{ "a": "1", "b...
