便签中的内容会存储在本地,这样即便你关掉了浏览器,在下次打开时,依然会读取到上一次的记录。是个非常小巧实用的本地备忘录

localStorage浏览器支持

Internet Explorer 8+, Firefox3.5+, Opera, Chrome4+, Safar4+

  • 保存数据:localStorage.setItem(key,value);
  • 读取数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{font-family: "Microsoft Yahei"}
		.note{width:500px;margin-top:150px;margin-left:-250px;position:absolute;left:50%;background-color: #fff; -webkit-background-clip: content; border-radius: 2px; box-shadow: 1px 1px 50px rgba(0,0,0,.3);}
		.title{height: 50px; line-height: 50px; border: 0; background-color: #6c9; color: #fff;padding:0 20px;}
		content{display: block;}
		textarea{width:500px;display: block; padding: 10px 20px; border: none; box-sizing: border-box; color: #666; word-wrap: break-word;}
		textarea:focus{outline: none;}
	</style>
</head>
<body>
	<div class="note">
		<div class="title">便签</div>
		<div class="content"><textarea placeholder="内容" id="note"></textarea></div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript">
	// localStorage - 没有时间限制的数据存储
		$(function(){ 
			var note = localStorage.getItem('note');
			$('#note').focus();
			$('#note').val(note)
			$('#note').blur(function(){
				var content = $('#note').val()
				//存储 键值对应
				localStorage.setItem('note', content);  
			})
			
		})
	</script>
</body>
</html>