Question

我正在摆弄这段代码，试图了解它的部分工作原理。 Firefox中的所有内容似乎都按预期工作，但“登录”按钮在任何其他浏览器中都不起作用。当我在Chrome中检查它时，它说：

Uncaught SyntaxError：位于0的JSON中的意外标记u

在JSON.parse（）

在CheckUsername（alt.html：24）

在HTMLInputElement.onclick（alt.html：72）

在此之前，它抱怨CookieVars变量未定义（我想，我无法让它再次复制该错误）。

我曾尝试使用谷歌搜索这个问题，但有些解释是我的想法，或者似乎与我的情况无关。

有人能告诉我它是如何在Firefox中运行的，而不是其他浏览器吗？问题是什么以及如何解决？

感谢您的协助。

<!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不支持本地文件的Cookie（或者像Peter Lyons所提到的，localhost *），除非您使用--enable-file-cookies标志启动它。您可以在http://code.google.com/p/chromium/issues/detail?id=535阅读有关该问题的讨论。*如果您直接使用本地IP地址（127.0.0.1），Chrome会支持Cookie。所以在localhost的情况下，这可能是一个更容易的解决方法。

Answer 2

验证您的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.");
 }
}

这将防止该错误。但也许您的代码中仍然存在错误，导致将错误的数据写入nameValueArray。例如，由于Chrome的Cookie行为。

问候

JavaScript在Firefox中工作但不在其他浏览器中工作

2 个答案: