保存用户输入内容的 JavaScript-6ren

保存用户输入内容的 JavaScript

转载作者：行者123 更新时间：2023-12-03 08:28:20

我有一个类似于pastebin 的网站。 index.php 上有一个文本框，在您完成输入以上传粘贴后需要填写验证码。如果你输入了错误的代码，就像很多人(包括我)一样，会出现一个新页面，提示你输入错误，然后当你返回到index.php时，你在文本框中写入的所有内容都消失了？ cookie或者缓存不是可以保存这个吗？

这是一个 GIF，展示了我的意思。

我认为这可以使用某种 javascript 或 cookie 来解决，我不知道是哪一个或什么？

请帮忙。

编辑:Index.php

$_SESSION["dox"] = $dox;

$hidden = md5(mt_rand());
$_SESSION["hidden"] = $hidden;

$poster = md5(mt_rand());
$_SESSION["poster"] = $poster;

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>CLOUDNINE BETA - TITLE</title>
<link href="style/purple.css" rel="stylesheet" type="text/css" />
</head>
<body id="center" onload="document.getElementById('captcha-form').focus()">
<h1>WEBSITE</h1>
<p><h2><strong>Information Exchange<p></strong></h2>


<div style="color:rgb(255, 51, 51);text-shadow:rgb(194, 31, 31) 0px 1px 3px;font-size: 22px;">
<div style="margin-top:22px;margin-bottom:22px;"></div>This site is still under development, if you find any bugs, please report them to Bblaal@blabla.com</a>
</div>

<h3><a href="privacy.php">Privacy Policy</a> | <a href="/old">Old</a>  |  <a href="doxviewer.php">Archive</a> | <a href="/fail">Fail</a> | <a href="faq.php">FAQ</a>
<form action="post.php" method="post"></h3>
<p>
<input type="text" id="name" name="<?php echo $_SESSION["name"]; ?>" rows="25" cols="80" style="font-size:16px;text-align:center;font-family:Courier;color:white;border-top-left-radius:4px 4px;border-top-right-radius:4px 4px;border-bottom-right-radius:4px 4px;border-bottom-left-radius:4px 4px;background-color: rgb(30, 4, 38); border-width: 1px; border-style: solid; padding: 5px; border-color: white; " placeholder="Name"></textarea> <br />
<p>
<textarea id="dox" name="<?php echo $_SESSION["dox"]; ?>" rows="25" cols="80" placeholder="Info goes here. Post whatever info you want here. We try to stick to our strict non-removal policy, so once the post go up, they stay up unless they are shit. Asking for a post to be removed is probably the surest way for them to be updated and expanded upon.
No, this isn't doxbin."></textarea>

<p><strong>Type in the CAPTCHA here.</p><strong>
<img src="captcha.php" id="captcha" /><br/>
<a href="#" onclick="
    document.getElementById('captcha').src='captcha.php?'+Math.random();
    document.getElementById('captcha-form').focus();"
    id="change-image">Not readable? Change text.</a><br/><br/>

<input type="text" id="poster" name="<?php echo $_SESSION["poster"]; ?>" rows="25" cols="80" style="font-size:16px;text-align:center;font-family:Courier;color:white;border-top-left-radius:4px 4px;border-top-right-radius:4px 4px;border-bottom-right-radius:4px 4px;border-bottom-left-radius:4px 4px;background-color: rgb(30, 4, 38); border-width: 1px; border-style: solid; padding: 5px; border-color: white; " placeholder="Poster (Optional)"><br />
<input type="text" name="captcha" id="captcha-form" autocomplete="off" style="font-size:16px;text-align:center;font-family:Courier;color:white;border-top-left-radius:4px 4px;border-top-right-radius:4px 4px;border-bottom-right-radius:4px 4px;border-bottom-left-radius:4px 4px;background-color: rgb(30, 4, 38); margin-right:5px;border-width: 1px; border-style: solid; padding: 5px; border-color: white; " placeholder="Enter Captcha"> <br/>
<input type="submit" value="POST" style="font-size:16px;text-align:center;font-family:Courier;color:white;border-top-left-radius:4px 4px;border-top-right-radius:4px 4px;border-bottom-right-radius:4px 4px;border-bottom-left-radius:4px 4px;background-color: rgb(30, 4, 38); margin-right:5px;border-width: 1px; border-style: solid; padding: 5px; border-color: white; " /><br />
<input type="text" name="<?php echo $hidden; ?>" value="" style="visibility: hidden;" />
</p>

<?php
/** Validate captcha */
if (!empty($_REQUEST['captcha'])) {
    if (empty($_SESSION['captcha']) || trim(strtolower($_REQUEST['captcha'])) != $_SESSION['captcha']) {
        $captcha_message = "Invalid captcha";
        $style = "background-color: #FF606C";
    } else {
        $captcha_message = "Valid captcha";
        $style = "background-color: #CCFF99";
    }

    $request_captcha = htmlspecialchars($_REQUEST['captcha']);

    echo <<<HTML
        <div id="result" style="$style">
        <h2>$captcha_message</h2>
        <table>
        <tr>
            <td>Session CAPTCHA:</td>
            <td>{$_SESSION['captcha']}</td>
        </tr>
        <tr>
            <td>Form CAPTCHA:</td>
            <td>$request_captcha</td>
        </tr>
        </table>
        </div>
HTML;
    unset($_SESSION['captcha']);
}
?>

</form>



<p>
<div style="margin-top:10px;margin-bottom:10px;text-align:center;color:white;font-size:18px;font-family:Arial;font-weight:normal;">
Follow us on Twitter: <a href="https://twitter.com/user" style="color:rgb(242, 242, 242);">@user</a>
| Contact us: <a href="mailto:blabal@gmail.com" style="color:rgb(242, 242, 242);">blabla@gmail.come</a>
| <a href="t" style="color:rgb(242, 242, 242);">Our PGP Key</a>
(Use for email) </div>
</p>
</body>
</html>

验证码.php代码:

<?php
/**
 * Script para la generación de CAPTCHAS
 *
 * @author  Jose Rodriguez <jose.rodriguez@exec.cl>
 * @license GPLv3
 * @link    http://code.google.com/p/cool-php-captcha
 * @package captcha
 * @version 0.3
 *
 */


session_start();

if (!isset($_POST['captcha'])) {
    $_POST['captcha'] = "undefine";
}

$captcha = new SimpleCaptcha();



// OPTIONAL Change configuration...
//$captcha->wordsFile = 'words/es.php';
//$captcha->session_var = 'secretword';
//$captcha->imageFormat = 'png';
//$captcha->lineWidth = 3;
//$captcha->scale = 3; $captcha->blur = true;
//$captcha->resourcesPath = "/var/cool-php-captcha/resources";

// OPTIONAL Simple autodetect language example
/*
if (!empty($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
    $langs = array('en', 'es');
    $lang  = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
    if (in_array($lang, $langs)) {
        $captcha->wordsFile = "words/$lang.php";
    }
}
*/



// Image generation
$captcha->CreateImage();





/**
 * SimpleCaptcha class
 *
 */
class SimpleCaptcha {

    /** Width of the image */
    public $width  = 200;

    /** Height of the image */
    public $height = 60;

    /** Dictionary word file (empty for random text) */
    public $wordsFile = 'words/en.php';

    /**
     * Path for resource files (fonts, words, etc.)
     *
     * "resources" by default. For security reasons, is better move this
     * directory to another location outise the web server
     *
     */
    public $resourcesPath = 'resources';

    /** Min word length (for non-dictionary random text generation) */
    public $minWordLength = 5;

    /**
     * Max word length (for non-dictionary random text generation)
     * 
     * Used for dictionary words indicating the word-length
     * for font-size modification purposes
     */
    public $maxWordLength = 8;

    /** Sessionname to store the original text */
    public $session_var = 'captcha';

    /** Background color in RGB-array */
    public $backgroundColor = array(255, 255, 255);

    /** Foreground colors in RGB-array */
    public $colors = array(
        array(27,78,181), // blue
        array(22,163,35), // green
        array(214,36,7),  // red
    );

    /** Shadow color in RGB-array or null */
    public $shadowColor = null; //array(0, 0, 0);

    /** Horizontal line through the text */
    public $lineWidth = 0;

    /**
     * Font configuration
     *
     * - font: TTF file
     * - spacing: relative pixel space between character
     * - minSize: min font size
     * - maxSize: max font size
     */
    public $fonts = array(
        'Antykwa'  => array('spacing' => -3, 'minSize' => 27, 'maxSize' => 30, 'font' => 'AntykwaBold.ttf'),
        'Candice'  => array('spacing' =>-1.5,'minSize' => 28, 'maxSize' => 31, 'font' => 'Candice.ttf'),
        'DingDong' => array('spacing' => -2, 'minSize' => 24, 'maxSize' => 30, 'font' => 'Ding-DongDaddyO.ttf'),
        'Duality'  => array('spacing' => -2, 'minSize' => 30, 'maxSize' => 38, 'font' => 'Duality.ttf'),
        'Heineken' => array('spacing' => -2, 'minSize' => 24, 'maxSize' => 34, 'font' => 'Heineken.ttf'),
        'Jura'     => array('spacing' => -2, 'minSize' => 28, 'maxSize' => 32, 'font' => 'Jura.ttf'),
        'StayPuft' => array('spacing' =>-1.5,'minSize' => 28, 'maxSize' => 32, 'font' => 'StayPuft.ttf'),
        'Times'    => array('spacing' => -2, 'minSize' => 28, 'maxSize' => 34, 'font' => 'TimesNewRomanBold.ttf'),
        'VeraSans' => array('spacing' => -1, 'minSize' => 20, 'maxSize' => 28, 'font' => 'VeraSansBold.ttf'),
    );

    /** Wave configuracion in X and Y axes */
    public $Yperiod    = 12;
    public $Yamplitude = 14;
    public $Xperiod    = 11;
    public $Xamplitude = 5;

    /** letter rotation clockwise */
    public $maxRotation = 8;

    /**
     * Internal image size factor (for better image quality)
     * 1: low, 2: medium, 3: high
     */
    public $scale = 2;

    /** 
     * Blur effect for better image quality (but slower image processing).
     * Better image results with scale=3
     */
    public $blur = false;

    /** Debug? */
    public $debug = false;

    /** Image format: jpeg or png */
    public $imageFormat = 'jpeg';


    /** GD image */
    public $im;



    public function __construct($config = array()) {
    }


    public function CreateImage() {
        $ini = microtime(true);

        /** Initialization */
        $this->ImageAllocate();

        /** Text insertion */
        $text = $this->GetCaptchaText();
        $fontcfg  = $this->fonts[array_rand($this->fonts)];
        $this->WriteText($text, $fontcfg);

        $_SESSION[$this->session_var] = $text;

        /** Transformations */
        if (!empty($this->lineWidth)) {
            $this->WriteLine();
        }
        $this->WaveImage();
        if ($this->blur && function_exists('imagefilter')) {
            imagefilter($this->im, IMG_FILTER_GAUSSIAN_BLUR);
        }
        $this->ReduceImage();


        if ($this->debug) {
            imagestring($this->im, 1, 1, $this->height-8,
                "$text {$fontcfg['font']} ".round((microtime(true)-$ini)*1000)."ms",
                $this->GdFgColor
            );
        }


        /** Output */
        $this->WriteImage();
        $this->Cleanup();
    }



    /**
     * Creates the image resources
     */
    protected function ImageAllocate() {
        // Cleanup
        if (!empty($this->im)) {
            imagedestroy($this->im);
        }

        $this->im = imagecreatetruecolor($this->width*$this->scale, $this->height*$this->scale);

        // Background color
        $this->GdBgColor = imagecolorallocate($this->im,
            $this->backgroundColor[0],
            $this->backgroundColor[1],
            $this->backgroundColor[2]
        );
        imagefilledrectangle($this->im, 0, 0, $this->width*$this->scale, $this->height*$this->scale, $this->GdBgColor);

        // Foreground color
        $color           = $this->colors[mt_rand(0, sizeof($this->colors)-1)];
        $this->GdFgColor = imagecolorallocate($this->im, $color[0], $color[1], $color[2]);

        // Shadow color
        if (!empty($this->shadowColor) && is_array($this->shadowColor) && sizeof($this->shadowColor) >= 3) {
            $this->GdShadowColor = imagecolorallocate($this->im,
                $this->shadowColor[0],
                $this->shadowColor[1],
                $this->shadowColor[2]
            );
        }
    }





    /**
     * Text generation
     *
     * @return string Text
     */
    protected function GetCaptchaText() {
        $text = $this->GetDictionaryCaptchaText();
        if (!$text) {
            $text = $this->GetRandomCaptchaText();
        }
        return $text;
    }




    /**
     * Random text generation
     *
     * @return string Text
     */
    protected function GetRandomCaptchaText($length = null) {
        if (empty($length)) {
            $length = rand($this->minWordLength, $this->maxWordLength);
        }

        $words  = "abcdefghijlmnopqrstvwyz";
        $vocals = "aeiou";

        $text  = "";
        $vocal = rand(0, 1);
        for ($i=0; $i<$length; $i++) {
            if ($vocal) {
                $text .= substr($vocals, mt_rand(0, 4), 1);
            } else {
                $text .= substr($words, mt_rand(0, 22), 1);
            }
            $vocal = !$vocal;
        }
        return $text;
    }




    /**
     * Random dictionary word generation
     *
     * @param boolean $extended Add extended "fake" words
     * @return string Word
     */
    function GetDictionaryCaptchaText($extended = false) {
        if (empty($this->wordsFile)) {
            return false;
        }

        // Full path of words file
        if (substr($this->wordsFile, 0, 1) == '/') {
            $wordsfile = $this->wordsFile;
        } else {
            $wordsfile = $this->resourcesPath.'/'.$this->wordsFile;
        }

        if (!file_exists($wordsfile)) {
            return false;
        }

        $fp     = fopen($wordsfile, "r");
        $length = strlen(fgets($fp));
        if (!$length) {
            return false;
        }
        $line   = rand(1, (filesize($wordsfile)/$length)-2);
        if (fseek($fp, $length*$line) == -1) {
            return false;
        }
        $text = trim(fgets($fp));
        fclose($fp);


        /** Change ramdom volcals */
        if ($extended) {
            $text   = preg_split('//', $text, -1, PREG_SPLIT_NO_EMPTY);
            $vocals = array('a', 'e', 'i', 'o', 'u');
            foreach ($text as $i => $char) {
                if (mt_rand(0, 1) && in_array($char, $vocals)) {
                    $text[$i] = $vocals[mt_rand(0, 4)];
                }
            }
            $text = implode('', $text);
        }

        return $text;
    }




    /**
     * Horizontal line insertion
     */
    protected function WriteLine() {

        $x1 = $this->width*$this->scale*.15;
        $x2 = $this->textFinalX;
        $y1 = rand($this->height*$this->scale*.40, $this->height*$this->scale*.65);
        $y2 = rand($this->height*$this->scale*.40, $this->height*$this->scale*.65);
        $width = $this->lineWidth/2*$this->scale;

        for ($i = $width*-1; $i <= $width; $i++) {
            imageline($this->im, $x1, $y1+$i, $x2, $y2+$i, $this->GdFgColor);
        }
    }




    /**
     * Text insertion
     */
    protected function WriteText($text, $fontcfg = array()) {
        if (empty($fontcfg)) {
            // Select the font configuration
            $fontcfg  = $this->fonts[array_rand($this->fonts)];
        }

        // Full path of font file
        $fontfile = $this->resourcesPath.'/fonts/'.$fontcfg['font'];


        /** Increase font-size for shortest words: 9% for each glyp missing */
        $lettersMissing = $this->maxWordLength-strlen($text);
        $fontSizefactor = 1+($lettersMissing*0.09);

        // Text generation (char by char)
        $x      = 20*$this->scale;
        $y      = round(($this->height*27/40)*$this->scale);
        $length = strlen($text);
        for ($i=0; $i<$length; $i++) {
            $degree   = rand($this->maxRotation*-1, $this->maxRotation);
            $fontsize = rand($fontcfg['minSize'], $fontcfg['maxSize'])*$this->scale*$fontSizefactor;
            $letter   = substr($text, $i, 1);

            if ($this->shadowColor) {
                $coords = imagettftext($this->im, $fontsize, $degree,
                    $x+$this->scale, $y+$this->scale,
                    $this->GdShadowColor, $fontfile, $letter);
            }
            $coords = imagettftext($this->im, $fontsize, $degree,
                $x, $y,
                $this->GdFgColor, $fontfile, $letter);
            $x += ($coords[2]-$x) + ($fontcfg['spacing']*$this->scale);
        }

        $this->textFinalX = $x;
    }



    /**
     * Wave filter
     */
    protected function WaveImage() {
        // X-axis wave generation
        $xp = $this->scale*$this->Xperiod*rand(1,3);
        $k = rand(0, 100);
        for ($i = 0; $i < ($this->width*$this->scale); $i++) {
            imagecopy($this->im, $this->im,
                $i-1, sin($k+$i/$xp) * ($this->scale*$this->Xamplitude),
                $i, 0, 1, $this->height*$this->scale);
        }

        // Y-axis wave generation
        $k = rand(0, 100);
        $yp = $this->scale*$this->Yperiod*rand(1,2);
        for ($i = 0; $i < ($this->height*$this->scale); $i++) {
            imagecopy($this->im, $this->im,
                sin($k+$i/$yp) * ($this->scale*$this->Yamplitude), $i-1,
                0, $i, $this->width*$this->scale, 1);
        }
    }




    /**
     * Reduce the image to the final size
     */
    protected function ReduceImage() {
        // Reduzco el tamaño de la imagen
        $imResampled = imagecreatetruecolor($this->width, $this->height);
        imagecopyresampled($imResampled, $this->im,
            0, 0, 0, 0,
            $this->width, $this->height,
            $this->width*$this->scale, $this->height*$this->scale
        );
        imagedestroy($this->im);
        $this->im = $imResampled;
    }



    /**
     * File generation
     */
    protected function WriteImage() {
        if ($this->imageFormat == 'png' && function_exists('imagepng')) {                header("Content-type: image/png");
            imagepng($this->im);
        } else {
            header("Content-type: image/jpeg");
            imagejpeg($this->im, null, 80);
        }
    }



    /**
     * Cleanup
     */
    protected function Cleanup() {
        imagedestroy($this->im);
    }
}




?>

最佳答案

提交表单时，文本框内容和验证码响应都会发布到 post.php。如果验证码验证失败，则以链接回index.php的形式发送文本框内容以及失败的内容，以便该内容可以用作文本框的初始值。

或者使用ajax发送文本和验证码，等待成功消息和链接，或者新验证码的错误。如果出现错误，则显示一条消息和新的验证码，以便用户可以重试，并且在成功之前页面不会重新加载。

关于保存用户输入内容的 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33448065/

文章推荐： javascript - 检测鼠标靠近圆边缘

文章推荐： javascript - Canvas只保存部分图像并将其奇怪地拉伸(stretch)

javascript - 淡出 Div 内容 - 空 Div 内容 - 淡入新内容
我正在为我的按钮使用 onClick 功能。我的按钮代码如下所示: Button 1 Button 2 我的 JS 函数如下所示: function fadeNext(selectedId, spee
php - 如何将 MySQL 内容(文本+html 内容)分成列？
首先，我想提一下，我理解每个人在不提供至少一些试验或错误的情况下提出问题的感受，但这纯粹是一种知识需求，话虽如此，我会去提前问。我一直无法弄清楚如何将保存在 MySQL 表中的 600-1000 个
javascript - echo "row 1"内容每个不同位置的,"row 2"内容
我想做的事情有点令人困惑，而且我英语不太好，所以我先把代码贴在这里，这样你就可以很容易地理解: 以下是表单内容: Testing for Stackoverflow Option1
c++ - 使用 SDL_Renderer 绘制 2D 内容，使用 SDL_GLContext 绘制 OpenGL 内容
我学习 SDL 二维编程已有一段时间了，现在我想创建一个结合使用 SDL 和 OpenGL 的程序。我是这样设置的: SDL_Init(SDL_INIT_VIDEO); window = SDL_Cr
javascript - ID相同时如何获取data-*内容？
我创建了 2 个 data-* 标签。数据类别和数据标签。单击 href 标签后，我想复制该数据类别和数据标签以形成输入。我的代码是:
CSS 内容 - 换行符
我想用 CSS 换行。我正在使用内容。 td:before { content: "Test\A Test2"; } 它不工作。如何正确
Java HashMap 内容
这个问题已经有答案了: Java Class that implements Map and keeps insertion order? (8 个回答) 已关闭 6 年前。我有一个 HashMap
java - JMeter从SFTP文件夹中获取最新的文件/内容
我正在尝试使用 JMeter 执行端到端测试。测试涉及写入SFTP文件夹并从另一个SFTP文件夹读取写入操作生成的文件。我能够使用 JMeter SSH SFTP 插件连接到 SFTP 文件夹，并能
Java:上传文件并获取文件的字符串(内容)
您好，我有带有标准服务器端 Servlet 的 GWT 客户端。我可以从 GWT 客户端上传文件并在服务器端读取其内容我可以将其作为字符串发送回客户端但是我有 GWT FormPanel与操作
特定文件夹中允许的 Plone 内容
我在 Plone 4.3.9 中创建了一个自定义类型的灵巧性，称为 PersonalPage，必须只允许在特定文件夹中使用成员文件夹/用户文件夹 . 在他的 FTI 中，默认情况下 False .
Android:在新的应用程序版本中更改小部件的布局/内容
在新(更新)版本的应用程序中更改小部件布局的最佳做法是什么？当新版本提供更新、更好的小部件时，如何处理现有小部件？最佳答案我认为您必须向用户显示一个弹出窗口，说明“此版本中的新功能”并要求他们重新
旋转手机时Android隐藏 fragment 内容
在我的应用程序中，我使用支持 View 寻呼机和 PagerTabStrip。进入查看寻呼机我有一些 fragment ，进入其中一个我正在使用支持卡片 View 。运行应用程序后，所有卡片 View
Android更新textview计时器并刷新 map 内容？
我有以下布局文件。基本上我有谷歌地图，在左上角我有一个 TextView，我需要在其中每 15 秒保持一次计数器以刷新 map 。布局很好。
垃圾收集递归时的Java map 内容？
我使用如下结构: HashMap > > OverallMap 如果我这样做: OverallMap . clear ( ) clear() 丢弃的所有内容(HashMap 对象、Integer 对
php - 最佳实践ajax随机加载更多图像(内容)
我在数据库中有 1000 张图像。在页面加载时，我随机显示 60 张图片，当用户滚动时，我通过 AJAX 请求添加 20 张图片。第一种方法我所做的是将所有图像加载到一个容器中，然后隐藏所有图像并
表格消失后的 HTML 内容
我正在使用 woocommerce 创建一个网上商店。我想在每个产品上添加一个包含产品信息的表格，例如颜色、交货时间等等。但是当我添加这张表时。本产品消失后的所有内容。我的表的代码: td {
html - 内容:“”的作用是什么？
This question already has an answer here: What does an empty value for the CSS property content do?
javascript - 如何只点击模态外观而不点击对话框/内容？
因此，我正在与我的 friend 一起为 Google Chrome 开发一个扩展程序，对于大多数功能(即日历、设置等)，我们打开一个模式，这样我们就不必重定向到另一个页面。当您在内容之外单击时，我们
侧面带有垂直标题的 CSS 内容
我将可变高度的 CSS 框设置为在更大的 div 中向左浮动。现在我想添加一个标题，其中文本在框的左侧垂直显示(旋转 90 度)，如下面的链接所示(抱歉还不能发布图片)。 http://imagesh
html - 内容/页脚的宽度小于浏览器宽度
相关页面位于 www.codykrauskopf.com/circus 如果您查看我页面的右侧，在半透明容器和浏览器窗口边缘之间有一个间隙。我看了看，出于某种原因，wrap、main、content

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

保存用户输入内容的 JavaScript