Locate the exact username of a returning user by utilizing local storage

I am working on a script to identify new visitors to my page, prompt them for their name, and store it using local storage. If the visitor is a returning user, I want to display their name on the page using 'querySelector'.

So far, I have been trying to determine if the user is new or returning, but I've hit a roadblock.


var localStorage = window.localStorage;
    if(localStorage.getItem("reutrn_user")) {

      //

    } else {
        var name = prompt("Please enter your name");
        localStorage.setItem('username', name);
    }

Does anyone have suggestions on how to retrieve the username and display it in case of a returning user?

Thank you!

javascriptlocal-storage

Answer №1

The keys used in your getItem and setItem functions are not the same.

For instance, one key is current_user while the other is user_name.

let localStorageData = window.localStorage;

if(localStorageData.getItem("user_name")) {
    console.log(localStorageData.getItem("user_name"))
} else {
    let nameInput = prompt("Please input your name");
    localStorageData.setItem('user_name', nameInput);
}

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

Drag and drop functionality in Angular 4

I'm currently facing an issue with Angular drag and drop. I have created a component along with a directive for this purpose. Initially, I tried one solution which involved the following code: @HostListener('drop', ['$event']) pub ...

javascriptangularforeachdrag-and-drop

Issues arose regarding the display of arrows in the Magnific Popup gallery

Everything with my Magnific Popup is functioning as desired, except for the fact that the arrows are not appearing in the gallery mode. What I see instead is two blank boxes with a thin border on top. After examining the CSS code, I am unable to locate a ...

javascriptjquerycssmagnific-popup

issues I encounter while utilizing MeshLambertMaterial

I am currently using MeshLambertMaterial, but I have encountered a problem. Interestingly, when I use my Windows 10 notebook, everything works fine. However, the issue arises when I try to view an example on Three.js. Here are the errors that I have come a ...

javascripthtmlthree.js

NodeJs guide on removing multiple documents from a MongoDB collection using their _id values

Consider the following array of _ids: ["a12s", "33qq", "121a"] In MongoDB, there are methods such as deleteMany, which allows deletion based on specific queries: var myquery = { address: 'abc' }; dbo.collection("customers").deleteMany(myque ...

javascriptnode.jsmongodb

How do I retrieve the value of a class that is repeated multiple times?

In the HTML code I am working with, there are values structured like this: <div class="item" onClick="getcoordinates()"> <div class="coordinate"> 0.1, 0.3 </div> </div> <div class="item" onClick="getcoordinates() ...

javascripthtml

Tips on accessing the JS file api within an angular component.ts file

I've got a function in my JS file located at src/server/js/controller.js, and I'm trying to use that API within a component's ts file. I attempted the following code to achieve this but it doesn't seem to be working properly. controlle ...

javascriptangular

Running the npm install command will eliminate any external JS or CSS files that are being

For my project, I incorporated jquery-datatimepicker by including jquery.datetimepicker.min.css and jquery.datetimepicker.full.min.js in angular.json and placed them within the node_modules/datetimepick directory. Here is a snippet of my angular.json conf ...

javascriptnode.jsangularnpm

Try utilizing a distinct value for searching compared to the one that is shown in Material UI's Autocomplete feature for React in JavaScript

I'm currently utilizing the <AutoComplete /> component offered by Material UI. It prescribes the following organization for the options const options = [ { label: 'The Godfather', id: 1 }, { label: 'Pulp Fiction', id: 2 } ...

javascriptreactjsmaterial-ui

What is the significance of -= and += operators in JavaScript programming language?

I'm puzzled by the mathematical process behind this JavaScript code, which results in -11. let x = 2; let y = 4; console.log(x -= y += 9) ...

javascript

Ensure that the text input box is positioned at the bottom of the chatbox and enable scrolling

Is there a way to make the textbox stay fixed at the bottom of the chatbox, regardless of how many messages are present? Currently, it appears after the last message. Additionally, I would appreciate assistance in implementing a scroll feature that automat ...

javascripthtmljquerycss

In the world of Express, the res.write function showcases the magic of HTML elements contained within

Currently diving into web app development, I have ventured into using express and implemented the following code snippet: app.post("/", function(req, res) { var crypto = req.body.crypto; var fiat = req.body.fiat; var amount = req.body.amount; va ...

javascriptexpress

Is the div empty? Maybe jQuery knows the answer

I currently have a <div id="slideshow"> element on my website. This div is fully populated in the index.php file, but empty in all other pages (since it's a Joomla module). When the div is full, everything works fine. However, when it's emp ...

javascriptjquerycss

The controller in AngularJS fails to function properly after the initial page refresh

I am currently utilizing AngularJS in my hybrid Ionic application. Here is my controller: .controller('SubmitCtrl', function($scope) { console.log("It only works when the page is refreshed!"); }); The console.log function runs perfectly fine ...

javascriptangularjsionic-frameworkangularjs-controller

Defining an exact path within an Express Router when utilizing an array of routes

The Documentation for Express clearly states that you can provide an array of routes to the app.use method for a specific middleware. Furthermore, they explain how to separate routers into different files which is detailed here. However, it's not ev ...

javascriptnode.jsexpress

Manipulate Nested Objects using an Array of Keys

Currently, I am developing a recursive form using React and MUI that is based on a nested object. Throughout this process, it is crucial for me to keep track of the previous keys as I traverse through the recursion. As users interact with the form and mak ...

javascriptreactjsrecursionmaterial-ui

Categorize an array of objects based on a key using JavaScript

I searched extensively for solutions online, but I still can't seem to make it work and I'm unsure why. Here is an array with objects: array =[ { "name":"Alex", "id":0 }, { "age" ...

javascriptarraysobjectecmascript-6reduce

Combining and removing identical values in JavaScript

I need to sum the price values for duplicated elements in an array. Here is the current array: var products = [["product_1", 6, "hamburger"],["product_2", 10, "cola"],["product_2", 7, "cola"], ["product1", 4, "hamburger"]] This is what I am aiming for: ...

javascripthtmlnode.jsarrays

Illustrating a fresh DOM element with intro.js

I am currently utilizing intro.js to create a virtual 'tour' for my website. As I aim to provide a highly interactive experience for users, I have enabled the ability for them to engage with highlighted DOM elements at different points in the tou ...

javascripthtmlintro.js

Make Sure To Capitalize The First Letter Of Each Word In A Sentence

Hey there! I'm in need of some assistance to correct my code so it can perform the task described in the text below: function convertString(str) { var parts = str.split('-'); for (var i = 1; i < parts.length; i++) { retur ...

javascriptarrayscapitalization

Validate a JSON object key

There are two ways in which we receive JSON strings: "{"phoneNumber":[{"remove":["0099887769"]},{"add":["0099887765"]}]}" Or "{"phoneNumber":["0099887765"]}" We need to convert the JSON string from the first format to the second format. Is there a way ...

javascriptarraysjsonecmascript-6