将输入中的文本保存到 cookie 并在用户每次访问时显示给用户答案

【问题标题】：Save text in input to cookies and display it to user everytime he visits it将输入中的文本保存到 cookie 并在用户每次访问时显示给用户
【发布时间】：2023-03-19 13:55:02
【问题描述】：

我需要有关将输入保存到 cookie 并将其显示给用户的帮助。我需要将输入中的文本更改为 div 并在用户每次访问页面时为用户显示相同的文本。

现在我只有输入，因为我真的不知道如何输入。

HTML

<input type="text" class="name" placeholder="What's your name?"/>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');
.name{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 3.5vw;
    border: 0;
    outline:0;
    background: transparent;
    border-bottom: 2px solid white;
    width: 30%;
    color:#000000;
    position:fixed;
    top:60%;
    left:50%;
    margin-left:10px;
}

感谢您的帮助

【问题讨论】：

您希望cookies由服务器生成还是由网页生成？
对于服务器，我需要一个数据库吗？
我认为是网页。
不。您不需要数据库。您可以使用 PHP 生成 cookie
我不知道。什么更好？

标签： javascript jquery html css cookies

【解决方案1】：

我建议使用您的后端（例如 PHP）设置 cookie。但是，如果您只想使用客户端实现，则可以使用 js.cookie 库。

这是一个简单的工作代码，它使用仅由 javascript 编写和读取的 Cookie。它监听 keydown 事件，因此输入的每个字母都会自动更新 cookie。

重要提示：确保在运行时使用网络服务器（例如：http://localhost/index.html 而不是 file://c:/index.html。否则 cookie 将不起作用。

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script>
<body>
    <input id="name" type="text" class="name" placeholder="What's your name?"/>

    <script>
        $(document).ready(function(){
            var name = Cookies.get('_username');
            if (name) {
                $('#name').val(name);
            }
            $('#name').keydown(function(){
                var inputName = $('#name').val();
                Cookies.set('_username', inputName);
            })
        });
    </script>
</body>
</html>

【讨论】：