Question

我需要帮助将输入保存到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;
}

感谢您的帮助

Answer 1

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

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

重要：确保在运行时使用网络服务器（例如：http://localhost/index.html而不是文件：// c：/index.html。否则，Cookie会赢得＆＃t; t工作

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

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

1 个答案: