JavaScript working in Firefox but not other browsers

Question

I am fiddling with this piece of code to try to understand how parts of it work. Everything seems to be working as expected in Firefox, however the Login button does not work in any other browser. When I inspect it in Chrome it is saying:

Uncaught SyntaxError: Unexpected token u in JSON at position 0

at JSON.parse ()

at CheckUsername (alt.html:24)

at HTMLInputElement.onclick (alt.html:72)

And before that it was complaining about the CookieVars variable being undefined (I think, I cannot get it to replicate that error again).

I have tried Googling the issue but some of the explanations are way over my head or seem to not be relevant to my situation.

Can someone tell me how come this works in Firefox and not any other browser? What the issue is and how it can be fixed?

Your assistance is appreciated.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="UTF-8">
</head>
<script>
function NewMember() {
    var CookieVars = {};

    CookieVars.username = document.getElementById("UsersName").value;
    CookieVars.password = document.getElementById("PassWord").value;

    var jsonString = JSON.stringify(CookieVars);

    document.cookie = "MembersDetails=" + jsonString;
    alert("Thank you, you are now registered.");
    ClearTextBoxes();
}

function CheckUsername() {
    var nameValueArray = document.cookie.split("=");
    var CookieVars = JSON.parse(nameValueArray[1]);
    var UsersNameVar = document.getElementById("UsersName").value;

    if (CookieVars.username == UsersNameVar) {
       CheckPassword();
            } else {
                alert("Username not recognised, please register.");
    }
}

function CheckPassword() {
   var nameValueArray = document.cookie.split("=");
   var CookieVars = JSON.parse(nameValueArray[1]);
   var PassWordVar = document.getElementById("PassWord").value;
   if (CookieVars.password == PassWordVar) {
      document.getElementById("message").innerHTML = "You are now logged in, welcome.";
   } else {
      alert("Incorrect Password.");
   }
}

function ClearTextBoxes() {
    document.getElementById("UsersName").value = "";
    document.getElementById("PassWord").value = "";
}

</script>
<body>
  <table border="3">
    <tr>
      <td>
        Username:
      </td>
      <td>
        <input type="text" id="UsersName">
      </td>
    </tr>
    <tr>
      <td>
        Password:
      </td>
      <td>
        <input type="text" id="PassWord">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="button" value="Register" onclick="NewMember()">
        <input type="button" value="Login" onclick="CheckUsername()">
        <input type="button" value="Clear Boxes" onclick="ClearTextBoxes()">
      </td>
    </tr>
  </table>
    <p id="message"></p>
<img src="" alt="">
</body>
</html>

Answer 1

Chrome doesn't support cookies for local files (or, like Peter Lyons mentioned, localhost*) unless you start it with the --enable-file-cookies flag. You can read a discussion about it at http://code.google.com/p/chromium/issues/detail?id=535 .*Chrome does support cookies if you use the local IP address (127.0.0.1) directly. so in the localhost case, that could be an easier workaround.

Answer 2

validate your JSON:

function isJSON(str) {
    try {
        return (JSON.parse(str) && !!str);
    } catch (e) {
        return false;
    }
}

function CheckUsername() {
  var nameValueArray = document.cookie.split("=");
  var CookieVars = (nameValueArray && isJSON(nameValueArray[1])) ? JSON.parse(nameValueArray[1]) : false;
  var UsersNameVar = document.getElementById("UsersName").value;

  if (CookieVars && CookieVars.username == UsersNameVar) {
   CheckPassword();
        } else {
            alert("Username not recognised, please register.");
  }
}

function CheckPassword() {
  var nameValueArray = document.cookie.split("=");
  var CookieVars = (nameValueArray && isJSON(nameValueArray[1])) ? JSON.parse(nameValueArray[1]) : false;
  var PassWordVar = document.getElementById("PassWord").value;
  if (CookieVars && CookieVars.password == PassWordVar) {
     document.getElementById("message").innerHTML = "You are now logged in, 
   welcome.";
 } else {
  alert("Incorrect Password.");
 }
}

this will prevent that error. But maybe there is still an error in your code which causes the wrong data to be written into nameValueArray . For example because of Chrome's Cookie behaviour.

greetings

JavaScript working in Firefox but not other browsers

Question

2 answers

solution1
0 2017-12-08 14:16:22

solution2
0 2017-12-08 14:19:51

JavaScript working in Firefox but not other browsers

Question

2 answers

solution1 0 2017-12-08 14:16:22

solution2 0 2017-12-08 14:19:51

solution1
0 2017-12-08 14:16:22

solution2
0 2017-12-08 14:19:51