代码实现jQuery保存textarea内容到本地

最近,对在线编程很有兴趣,附带的给在线编程添加了一些新的功能,比如通过Cookie实现浏览器关闭后的代码恢复、再比如使用jQuery实现在线编辑的代码及时保存到本地,本文正是向大家介绍后者!

在线演示jQuery保存textarea内容到本地:http://ksly.sinaapp.com/get/index.html

前台代码(注意:请自行引入jquery、bootstrap。。等文件):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="PHPthinking">
<meta name="weburl" content="http://www.phpthinking.com/">
<title>jQuery实现保存textarea内容到本地</title>
<link href="../bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="./reset.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
.demo{width: 500px; margin: 30px auto; overflow: hidden;}
.textarea{margin-bottom: 10px; padding: 5px;width: 486px;}
</style>
</head>
<body>
<div class="demo">
<h2>jQuery实现保存textarea内容到本地</h2>
<br>
<form action="./" method="post">
<textarea class="textarea" rows="5" placeholder="输入文字,下载保存试试"></textarea>
<a href="#" class="btn btn-primary" id="download">下载输入框内文本</a>
<a href="#" class="btn btn-success" id="downloadPage">下载本页面</a>
</form>
</div>
</body>
<script src="../jquery.min.js"></script>
<script src="./jquery.generateFile.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#download').click(function(e){
var text = $(".textarea").val();
if (!text) {
$(".textarea").focus();
alert("你还没有输入内容!");
return false;
};
$.generateFile({
filename : 'export.txt',
content : $('textarea').val(),
script : 'get.php'
});
e.preventDefault();
});

$('#downloadPage').click(function(e){
$.generateFile({
filename : 'newpage.html',
content : $('html').html(),
script : 'get.php'
});
e.preventDefault();
});
});
</script>
</html>

后台代码:

<?php
header('Content-Type:text/html; charset=utf-8');
if(empty($_POST['filename']) || empty($_POST['content'])){
exit;
}
$filename = preg_replace('/[^a-z0-9\-\_\.]/i','',$_POST['filename']);
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');
echo $_POST['content'];

欢迎大家指点和建议,原创文章,转载注明: http://www.phpthinking.com/archives/1279

打赏此文

如果您觉得本站的内容对您有所帮助,您可以扫描下面的二维码小额支付请我喝杯茶,感谢!打赏记录
支付宝
微信
承诺:凡打赏捐助的朋友,留言备注自己的邮箱,在打赏捐助时间点的6个月内,本站会每周邮件推送原创专业技术博文,供大家学习和参考!

留下评论

All fields marked (*) are required