（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

每天一个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

每天学一个jquery插件-做一个便签

每天一个jquery插件-做一个便签

做一个便签