mimic user sign in using only javascript, HTML, and CSS

Question

so I am learning how to prototype website right now, and one of the requirement is to design and implement a paper prototype into an actual prototype on the web using ONLY javascript, HTML, and CSS.

I am wondering if there is a way for me to mimic the user log in function without using any databases. I'm thinking of maybe creating a method in the lines of

in javascript:
var username = Bob123
var password = BobHasNoPassword

and when I type that into the HTML form, it will redirect to another page.

You can do it easily but my question is why you want to save the credentials on client side? — Mr. Alien
– Mr. Alien, Commented May 4, 2015 at 7:22
This is for an assignment, and the assignment strictly limits the implementation to only Js, HTML, and CSS — user3277633
– user3277633, Commented May 4, 2015 at 7:23

Ifeanyi Chukwu · Accepted Answer · 2015-05-04 08:59:30Z

1

I suggest you use the HTML5 localStorage to store the username and the password. localStorage serves as a Storage API on your browser.Almost like a Database. When the user enters a username, you match it with the localStorage data using the getItem method to validate. You can even store multiple users by using multiple uniques key to store them. It can also serve for your session state and so on.

// Store values e.g register user
localStorage.setItem("username", "Smith");
localStorage.setItem("password", "p@55word");

// Retrieve user password/username
var username = localStorage.getItem("username");
var username = localStorage.getItem("password");

answered May 4, 2015 at 8:59

Ifeanyi Chukwu

3,3473 gold badges32 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pertrai1 · Accepted Answer · 2015-05-04 08:37:46Z

0

Yes, if this is just for prototyping only, I would have a username and password stored in variables. When the login is submitted, check against those variables and redirect to proper prototype page if matching. I assume you will give the credentials to show how it works and let them try to use with and without right credentials. Just add conditional that will direct to correct page if variables match or direct to another page if they don't.

answered May 4, 2015 at 8:37

pertrai1

4,36613 gold badges49 silver badges77 bronze badges

Collectives™ on Stack Overflow

mimic user sign in using only javascript, HTML, and CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related