代码实现jQuery保存textarea内容到本地_H5之家 - 中国HTML5教程资源分享第一站

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

在线演示jQuery保存textarea内容到本地：

前台代码（注意：请自行引入jquery、bootstrap。。等文件）：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="PHPthinking"> <meta content="http://www.phpthinking.com/"> <title>jQuery实现保存textarea内容到本地</title> <link href="../bootstrap.min.css" media="screen"> <link href="./reset.css">  <style type="text/css"> .demo{width: 500px; margin: 30px auto; overflow: hidden;} .textarea{margin-bottom: 10px; padding: 5px;width: 486px;} </style> </head> <body> <div> <h2>jQuery实现保存textarea内容到本地</h2> <br> <form action="./" method="post"> <textarea rows="5" placeholder="输入文字，下载保存试试"></textarea> <a href="#">下载输入框内文本</a> <a href="#">下载本页面</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'];

欢迎大家指点和建议，原创文章，转载注明：