jQuery-powered login system

I need help creating a website for my school project, where users can sign up and log in to their accounts without saving usernames and passwords to a database. I want to save the account through local storage instead. Here are my questions:

1: How can I create an account that is saved through local storage?

2: How do I implement a login feature that checks if the username and password are correct before granting access?

Could someone guide me on how to achieve this using jQuery? Thank you in advance!

Here's the HTML structure:

<div id="log-in-modal">
    <div class="modal-content">
        <span class="close" id="close-log-in">x</span>
        <p><label>Username</label><input type="text" id="username"></p>
        <p><label>Password</label><input type="password" id="password"></p>
        <input type="submit" value="Log In" id="submit">
    </div>
</div>

<div id="sign-up-modal">
    <div class="modal-content">
        <span class="close" id="close-sign-up">x</span>
        <p><label>Username</label><input type="text" id="sign-username"></p>
        <p><label>Password</label><input type="password" id="sign-password"></p>
        <input type="submit" value="Sign Up" id="sign-submit">
    </div>
</div>

These modals contain text fields for entering usernames and passwords. They can be accessed by clicking either the "Log In" or "Sign Up" button on the website menu.

Answer №1

If you're looking to implement a simple login system using Local Storage, consider storing 2 arrays and interact with them as needed:

Step 1: Initialize username/password arrays

if(localStorage['usernames'] && localStorage['passwords']) { // check if arrays already exist
    // handle existing arrays
} else {
    var usernames = []; 
    var passwords = []; // create empty arrays if not found in Local Storage
}

Step 2: Implement Sign up functionality

function signUp(signUpUsername, signUpPassword) {
    usernames.push(signUpUsername); // add username to the array
    passwords.push(signUpPassword); // add password to the array
}

Step 3: Develop Login feature

function logIn(loginUsername, loginPassword) {
    var cu = localStorage['usernames']; // correct usernames
    var cp = localStorage['passwords']; // correct passwords

Validate credentials from the stored arrays

    for(var i = 0; i < cu.length; i++) {
        if(cu[i] == loginUsername && cp[i] == loginPassword) {
            // Successfully logged in!
        } else {
            // Display error message for incorrect credentials
        }
    }
}

Note: This example lacks robust security measures and uses local storage directly in the browser. Use caution when handling sensitive data.

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

Is there a way to display tiff files in Google Chrome?

I've been struggling with this problem for over 48 hours now, tirelessly searching for a solution. The issue lies within an application built using the ext.net framework on the front end. Specifically, I'm encountering difficulties when it comes ...

Tips for avoiding the need to reload a single page application when selecting items in the navigation bar

I am in the process of creating a simple Single Page Application (SPA) which includes a carousel section, an about us section, some forms, and a team section. I have a straightforward question: How can I prevent the page from reloading when clicking on nav ...

Issue with negative margin not functioning properly in Internet Explorer 7

My code snippet looks like this: <style> .earthlogo{float: right; margin: -270px 0px 0px 0px;} </style> <div class="banner"> <p>ENVISIONING A BETTER TOMORROW</p> <div class="earthlogo ...

Color the entire rotated <th> element with a background shade

I have come across a unique issue that I cannot find a solution for on Stack Overflow or anywhere else. I am creating a comparison chart and need the <th> text to be rotated 270 degrees with zebra-striping on even columns. The problem is that while t ...

"Troubleshooting .col-lg-offset not functioning as expected

I recently made the switch from Foundation to Bootstrap and so far I am loving it. However, I'm facing an issue with the offset not working as expected. Can anyone provide some guidance on why this might be happening? Just for context, I am using Boot ...

My PUT request is encountering difficulties with axios and not being successfully processed

Using the MERN stack, I am developing a basic website that includes CRUD operations. However, whenever I attempt to update the documents, the following logs are generated: name 1 email 1 mem phone 1jnk bundle.js:1014:13 XMLHttpRequest { readyState: 4, time ...

Firefox now recognizes 4-digit hex color codes as rgba values during parsing

Recently, while using Firefox version 49, I accidentally discovered that it parses 4-digit hex colors as rgba. After referring to the CSS specification and searching through MDN, I couldn't find any documentation about this feature. Can anyone provide ...

Develop an interactive list selection feature

I am currently working on creating a dynamic drop-down box dependent on three input fields. Each input field is fetching data from individual tables named tour_type, countries, and destination. Here is the structure of the form: <label>Tour Type ...

Tips for Incorporating xmlhttp.responseText in If Statements

This is the code snippet from my save_custLog_data.php file: <?php $a = $_GET['custEmail']; $b = $_GET['pswrd']; $file = '/home/students/accounts/s2090031/hit3324/www/data/customer.xml'; if(file_exists($fi ...

Using HtmlAgilityPack to analyze improperly formatted HTML

I'm having trouble parsing an HTML page because the source code is not well-formed: <div class=\"item column-1\"> <h2><a href=\"/index.php">Bridgestone receives a Volkswagen Group Award</a></h2> <d ...

originalRenderPage has not been declared

I encountered an issue while working on my new nextjs app. The problem arose when I tried to add a carousel using props in my project, resulting in an error stating that 'originalRenderPage' in Document.js is not defined. Any assistance would be ...

Accessing public static files in Express by using the routes folder

I'm currently facing an issue with accessing a static file named 'home.html' located in the public directory of my app's architecture: public home.html routes index.js views myapp.js In myapp.js: var express = require('ex ...

Using the map function in JavaScript for recursive operations

I am faced with a map that visually represents a graph as follows: Map(5) { 1 => [ 2, 3 ], 2 => [ 7, 8, 10 ], 3 => [ 4 ], 10 => [ 12 ], 4 => [ 11 ] } In addition, there's this specific class designed to generate a rooted tree ...

DataGrid Component: Implementing a Button for Deleting Rows

I am currently developing a React component with MaterialUI, incorporating a Datagrid to manage a queue of files. The layout resembles this: https://i.sstatic.net/oh0GH.png One functionality I'm focusing on is when the user clicks on the three dots a ...

Sharing a Promise between Two Service Calls within Angular

Currently, I am making a service call to the backend to save an object and expecting a number to be returned via a promise. Here is how the call looks: saveTcTemplate(item: ITermsConditionsTemplate): ng.IPromise<number> { item.modifiedDa ...

Animated mosaic pattern menu design

Is there a way to achieve this effect with a sketch? Note: I would like to add hover animation to the borders if possible. I attempted to do it using the following code: clip-path: polygon(0 0, 100% 0, 92% 86%, 6% 100%); However, the shapes created by ...

Utilizing React Higher Order Components with called functions: "You cannot render functions as a React child"

Please refer to this codesandbox. I am currently working on creating a react Higher Order Component (HOC) that takes in both a functional component and a function to be executed within the HOC. In order to do this, I understand that I need to develop a re ...

Bill divider javascript application

I am developing a cost-splitting application for my roommates. Let me illustrate with an example scenario: Suppose there are 4 members, and the total cost incurred is $300. Out of these, 3 members (m1, m3, m4) contributed equally. Among them, m3 paid $180 ...

Help with Crafting Responsive CSS Design

I am seeking help to better comprehend the concept of responsive design through this question. Let's imagine a header on a standard desktop screen. Within that, I have a div element containing the information I wish to showcase. .hdrinfo{ width: ...

Monitoring page transitions in single-page applications using JavaScript

Has anyone found a method to keep track of "page" changes on single-page applications? I grasp the idea of a one-page app where all the html/css is loaded in advance and pages are created by showing and hiding elements as needed. Despite being technically ...