Javascript 将输入中的文本保存到Cookie中，并在用户每次访问时将其显示给用户_Javascript_Jquery_Html_Css_Cookies

Javascript 将输入中的文本保存到Cookie中，并在用户每次访问时将其显示给用户

javascript jquery html css cookies

Javascript 将输入中的文本保存到Cookie中，并在用户每次访问时将其显示给用户,javascript,jquery,html,css,cookies,Javascript,Jquery,Html,Css,Cookies,我需要有关将输入保存到cookies并将其显示给用户的帮助。我需要将输入中的文本转换为div，并在用户每次访问页面时显示相同的文本现在我只有输入，因为我真的不知道怎么做 HTML 感谢您的帮助我建议您使用后端（例如PHP）设置cookie。但是，如果只想使用客户端实现，可以使用js.cookie库下面是一个简单的工作代码，它只使用javascript编写和读取的cookie。它侦听keydown事件，以便输入的每个字母都自动更新cookie 重要信息：确保在运行Web服务器时使用它（例如：

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

现在我只有输入，因为我真的不知道怎么做

HTML

感谢您的帮助

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

下面是一个简单的工作代码，它只使用javascript编写和读取的cookie。它侦听keydown事件，以便输入的每个字母都自动更新cookie

重要信息：确保在运行Web服务器时使用它（例如：而不是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>


$（文档）.ready（函数（）{
var name=Cookies.get（“u用户名”）；
如果（姓名）{
$（'#name'）.val（name）；
}
$（'#name'）.keydown（函数（）{
var inputName=$（'#name'）.val（）；
Cookies.set（“用户名”，输入名称）；
})
});

你想让服务器还是网页生成cookies？对于服务器，我需要数据库吗？我想是网页生成的。不，你不需要数据库。你可以使用PHPI生成cookies。不知道。什么更好？

@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;
}

<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>