trying to store username and password in cookie with JavaScript

Question

I am trying to store the password and username inside a cookie and when the user logs in again to the page it should show the username and password here is the cookie function, it should store the cookie for 15 days and then it expires

here is the code

                <input type="text" id=user ><br>
                <label for="key" id=passlbl>password:</label><br>
                <input type="password" id="pd">

here is the javascript

let username = document.getElementById("user");
let pwd = document.getElementById("pd");

createCookie(username.value,pwd.value)

function createCookie(name,pwds){
    today = new Date();
    var expire = new Date();
    expire.setTime(today.getTime() + 3600000*24*15);
    document.cookie = name.value+"="+encodeURI(pwds.value)+";path=/" + ";expires="+expire.toUTCString();}

but when I refresh the page the text inside the input fields disappear

You should **never, ever** store password in plain in a cookie. — Wiktor Zychla, May 11 '20 at 14:50
What is `pwds`? Is it the password, or the password input element. — Barmar, May 11 '20 at 14:51
@WiktorZychla - unless it's a homework that explicitly requires to do just that. — PM 77-1, May 11 '20 at 14:51
@PM77-1 If any class has **that** as an assignment I'd ask the department dean to investigate the prof for instilling terrible ideas in the student body. — Dai, May 11 '20 at 14:52
We need more information to diagnose the issue. There is nothing in the code presented here that would show the username or password after refresh. — Heretic Monkey, May 11 '20 at 14:52
@WiktorZychla If you're storing it on the client side, it doesn't really matter, since a hashed value is just as insecure. — Barmar, May 11 '20 at 14:53
@Barmar What does hashing have to do with anything? The OP isn't hashing anything (`encodeURI` is not a hash function) and hashed passwords by themselves are still a huge problem because unless they're salted the majority of them can be reversed using rainbow-tables and other techniques. — Dai, May 11 '20 at 14:54
@Dai I was responding to the comment that said not to store it in plain format. But storing it encrypted doesn't help, because you have to be able to decrypt it to put it into the form field. — Barmar, May 11 '20 at 14:56
@Barmar yes this is actually a homework for the university ,and here is the javascript where i globally get the values let username = document.getElementById("user");let pwd = document.getElementById("pd"); and here is how i am calling it createCookie(username.value,pwd.value) — adel.minwer, May 11 '20 at 15:29
Please do not post code into comments. [Edit] your question instead. — PM 77-1, May 11 '20 at 15:55
The real beast will come after you have managed to save cookie and trying to read it. Does homework allow using libraries or all they want is vanilla? — Vinay, May 11 '20 at 16:39
@Viney i have used some stuff before that we didnt take in university and i would be happy to learn new stuff so sure hit me up — adel.minwer, May 11 '20 at 17:26

score 3 · Accepted Answer · answered May 11 '20 at 18:16

Try this

function createCookie(name,pwds){
  let username = document.getElementById("user");
  let pwd = document.getElementById("pd");


  today = new Date();
  var expire = new Date();
  expire.setTime(today.getTime() + 3600000*24*15);
 

  document.cookie = "name="+username.value+";path=/" + ";expires="+expire.toUTCString();
  document.cookie = "password="+encodeURI(pwd.value)+";path=/" + ";expires="+expire.toUTCString();
  //can only write one entity at a time (name, pass)
}  


//event handler for page load - runs on every refresh
window.onload = function(){

  //how to read back the stored name and password?
  //https://stackoverflow.com/q/10730362/6160662
  //https://stackoverflow.com/q/5639346/6160662


  //for now
  var uname = 'Route66';
  var pass = '123456';

  document.getElementById('user').value = uname;
  document.getElementById('pd').value = pass;

}

<input type="text" id="user">
<input type="password" id="pd">
<input type="button" onclick="createCookie()" value="submit">

trying to store username and password in cookie with JavaScript

1 Answers1