Store user input as cookies and showcase it to the user upon their return visit

I'm looking for some assistance in saving user input to cookies and displaying it to the user. The goal is to have the text entered in the input field change into a div and be displayed to the user every time they revisit the page.

Currently, I only have the input field and I'm struggling to figure out how to implement the desired functionality.

Below is the code I have so far:

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

For styling, here is the CSS code:

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

Any help or guidance on how to achieve the desired functionality would be greatly appreciated. Thank you!

javascriptjqueryhtmlcsscookies

Answer №1

If you're looking to set a cookie using your backend programming language like PHP, that would be my recommendation. However, if you prefer a client-side approach, you can make use of the js.cookie library.

Below is a snippet of code that demonstrates how you can create and read cookies using JavaScript alone. This code is set up to update the cookie with each keystroke in an input field.

Important: Remember to run this code on a web server (e.g., use a URL like http://localhost/index.html instead of a local file like file://c:/index.html) to ensure that cookies function correctly.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps should I follow to install nodemon on my Windows 10 device?

Currently, I am utilizing the bash console on my Windows 10 system. My goal is to install nodemon using node.js, but when attempting to do so, I encounter this error message: sudo: npm: command not found It's puzzling because I should already have n ...

javascriptnode.jsexpressnpmnodemon

`` I am experiencing a problem with CSS display block in Internet Explorer

Looking to implement a basic tab menu using a combination of tables and div elements. The goal is to have the tabs switch styles when clicked, giving the appearance of being toggled, while also swapping out the corresponding content in separate div blocks ...

javascripthtmlcssinternet-explorertabs

Tips for translating an HTML webpage from Arabic to English

I have a bootstrap site with HTML pages but no backend functionality. How can I manually translate from Arabic to English, given that I already have the translations for all content and don't need to rely on translation tools? Is there a way to map Ar ...

javascripthtmlcssjsonbootstrap-4

What is the process for using javascript to upload multiple files?

I currently have 5 files uploaded here, https://i.sstatic.net/ebiPu.png. I am attempting to send them to the database after converting them to base64. The issue arises when I try to link them to the attachment_id. https://i.sstatic.net/jymya.png ...

javascriptjquerynode.jsangularjs

There is no response from Ajax

I am facing an issue with my AJAX call in communication with my Rails controller. Even though the AJAX call itself seems fine, the callback function does not contain any data. Here is the AJAX request I'm making: $.ajax({ url: '/get_progres ...

javascriptruby-on-railsajaxreactjs

Distinguishing between client side rendering and server side rendering is the backbone of web development

My goal is to give users the option to request webpages from my website either directly from the server or by clicking on links, which will be managed by Backbone's router. When a user requests a webpage directly from the server, they will receive a ...

javascripthtmlbackbone.jssingle-page-application

Here is a method to transform the JSON object into a string as demonstrated below:

Presented below is a JSON object: { "category": "music", "location": { "city": "Braga" }, "date": { "start": { "$gte": "2017-05-01T18:30:00.000Z" }, "end": { "$lt": "2017-05-12T18:30:00.000Z" } } } I am looking t ...

javascriptangulartypescript

Utilizing CSS classes and IDs for unordered lists

What's the correct way to write it when the ul is a class instead of an id? ul#Menu li a{} ul.Menu li a{} isn't functioning correctly ...

css

Highlight the navigation transition in the menu

Is there a more updated tutorial available for creating an underline effect that slides from one link to another when hovered over and remains at the clicked link? I have come across a tutorial on Underline transition in menu which seems to be based on th ...

javascripthtmlcsscss-transitions

Issues arise with loading AngularJS directive properly within the context of service utilization

Currently, I am diving into the world of JavaScript and tackling a project that involves fetching data from MongoDB. My task is to write code in AngularJS to create a pie chart using Highcharts. Surprisingly, everything works smoothly when I solely use an ...

javascriptangularjsnode.jsexpresshighcharts

Tips for indicating an error when an array contains empty values

Object = { 0 : { NAME: 'A' , PET :'DOG' , AGE : 'NINE' }, 1 : { NAME: 'B' , PET :'CAT' , AGE : 'TEN' }, 2 : { NAME: 'C' , PET :'TURTLE' , AGE : '' } } HT ...

javascripthtmlarraysangularjsdropdown

The setState function in React.js fails to properly assign data

Recently, I've been using axios.get() to retrieve data from my database. The response is coming back correctly, but for some reason, when I attempt to update the state with this data, nothing seems to change. import React, { Component, useState, useE ...

javascriptreactjs

Navigating sub-domains swiftly

Having trouble setting up sub-domains and routing in Express Node. I need to direct users based on their device and browser type. If the user is on a desktop, they should be routed to web.. If they are on a mobile device, it should be mobile.. And if the ...

javascriptexpress

AngularJS $location Redirect Error: Property 'path' Undefined

I'm struggling with an issue in my AngularJS code where I am trying to change the URL without reloading the page when a submit button is clicked. However, I keep getting a TypeError: Cannot read property 'path' of undefined in the console. ...

javascriptangularjs

Obtain data from jQuery Data row

I am currently working on an asp.net page where I have implemented jQuery datatables. Below is a snippet of the code: <% foreach (SubmissionSearchResult result in SearchResults) {%> <tr data-name='<%=result.ID %>'> For each r ...

javascriptjqueryhtmlasp.net

Sorting by price using the ng-repeat directive is not suitable for this

Utilizing angular's ng-repeat along with orderBy on a product catalog page to sort the products based on a select change. The ordering by name using orderBy works as expected, however, when it comes to price it sorts like this: 1,10,11,12,13,14,2,3,4 ...

javascripthtmlangularjsangularjs-orderby

The function call to 'import firebase.firestore()' results in a value

I recently set up a Vue App with the Vuefire plugin. Here is an example of my main.js file, following the documentation provided at: : import Vue from 'vue' import App from './App.vue' import router from './router' import sto ...

javascriptfirebasevue.jsgoogle-cloud-firestorevuefire

React Application not reflecting recent modifications made to class

My current project involves creating a transparent navigation bar that changes its background and text color as the user scrolls. Utilizing TailwindCSS for styling in my React application, I have successfully implemented the functionality. // src/componen ...

javascripthtmlcssreactjstailwind-css

Struggling to execute a custom SQL update method in .NET through jQuery, encountering various errors like 404 and 500

I am attempting to invoke a .NET method from a JavaScript file within a Web Form project. I am uncertain if my approach is correct and I am encountering difficulties in debugging the process. .NET method: [System.Web.Services.WebMethod] public st ...

jqueryhtmlsqlajax

:after functionality not operating properly in Internet Explorer

The titles on this page have arrows displayed before them using a special styling. However, there seems to be an issue with how it displays on Internet Explorer. // edit : I made a mistake, my styling is actually on paragraph tags 'p'. Maybe tha ...

htmlcsscross-browsercross-platform