使用 JavaScript 在网站上显示 cookie答案

【问题标题】：Displaying cookies on a website using JavaScript使用 JavaScript 在网站上显示 cookie
【发布时间】：2015-01-20 14:50:45
【问题描述】：

所以我有一个工作了 6 个小时的任务。我应该使用 JavaScript 创建一个 cookie 并在网站的用户个人资料页面上显示 cookie 信息。

在尝试此操作时，我编写了一堆代码，理想情况下，我想使用表单上的提交按钮将信息最初保存为 cookie，然后在查看者返回网络时显示相同的信息页。反复失败，我只是将信息放入 cookie 中。所以只要它有效，我不在乎它是如何运作的，在提交时，或者我插入的信息。

下面是 JavaScript：

<script type="text/javascript" language="javascript">
function setCookie(cookieName, cookieValue, cookiePath, cookieExpires){
    cookieValue = escape(cookieValue);
    if (cookieExpires == ""){
    var nowDate = new Date();
    nowDate.setMonth(nowDate.getMonth() + 6);
    cookieExpires = nowDate.toGMTString();
}
if (cookiePath != ""){
    cookiePath = ";Path=" + cookiePath;
}
document.cookie = cookieName + "=" + cookieValue + ";expires=" + cookieExpires + cookiePath;
}

setCookie("cookieFirstName", "George", "", "");
setCookie("cookieLastName", "MaGoo", "", "");
setCookie("cookieEmail", "gMaGoo@gmail.com", "", "");
setCookie("cookieTelNumber", "4095555545", "", "");
setCookie("cookieBirthdate", "12/19/2004", "", "");
setCookie("cookieCity", "Westend", "", "");
setCookie("cookieState", "California", "", "");

function getCookie(cookieFirstName){
var cookieValue = document.cookie;
var cookieStartsAt = cookieValue.indexOf(" " + cookieName + "=");
if (cookieStartsAt == -1){
    cookieStartsAt = cookieValue.indexOf(cookieName + "=");
}
if (cookieStartsAt == -1){
    cookieValue = null;
} else {
    cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt) + 1;
    var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt);
    if (cookieEndsAt == -1){
        cookieEndsAt = cookieValue.length;
    }
    cookieValue = unescape(cookieValue.substring(cookieStartsAt, cookieEndsAt));
}
return cookieValue;
}
function yummyCookie(){
  var cFirst = getCookie("cookieFirstName");
  if (cFirst != null){
      document.getElementById("firstname").value = cFirst;
  }
  var cLast = getCookie("cookieLastName");
  if (cLast != null){
      document.getElementById("lastname").value = cLast;
  }
  var cEmail = getCookie("cookieEmail");
  if (cEmail != null){
      document.getElementById("email").value = cEmail;
  }
  var cTelNumber = getCookie("cookieTelNumber");
  if (cTelNumber != null){
      document.getElementById("telnumber").value = cTelNumber;
  }
  var cBirthdate = getCookie("cookieBirthdate");
  if (cBirthdate != null){
      document.getElementById("birthdate").value = cBirthdate;
  }
  var cCity = getCookie("cookieCity");
  if (cCity != null){
      document.getElementById("city").value = cCity;
  }
  var cState = getCookie("cookieState");
  if (cState != null){
      document.getElementById("state").value = cState;
  }
}
</script>

此信息已放置在标签中。网站的正文如下所示：

<body onLoad="yummyCookie()">
<div class="wrapper">


<header class="center" id="banner">
    <h1>Lindsey's Pet Picture Paradise</h1>
  </header>
  <aside id="menu" class="floatleft">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="businessprofile.html">Business Profile</a></li>
        <li><a href="userprofile.html">User Profile</a></li>
      </ul>
    </nav>
  </aside>
  <div id="content" class="center">
  <h1 id="pageheader">User Profile</h1>
  <form id="userprofile">
  <table>
  <tr>
  <td><label for="firstname">First Name: </label></td>
  <td><input type="text" id="firstname"></td>
  </tr>
  <tr>
  <td><label for="lastname">Last Name: </label></td>
  <td><input type="text" id="lastname"></td>
  </tr>
  <tr>
  <td><label for="email">Email: </label></td>
  <td><input type="email" id="email"></td>
  </tr>
  <tr>
  <td><label for="telnumber">Telephone Number: </label></td>
  <td><input type="tel" id="telnumber"></td>
  </tr>
  <tr>
  <td><label for="birthdate">Birthdate: </label></td>
  <td><input type="date" id="birthdate"></td>
  </tr>
  <tr>
  <td><label for="city">City: </label></td>
  <td><input type="text" id="city"></td>
  </tr>
  <tr>
  <td><label for="state">State: </label></td>
  <td><select id="state">
    <option value="al">AL</option>
    <option value="ak">AK</option>
    <option value="az">AZ</option>
    <option value="ar">AR</option>
    <option value="ca">CA</option>
    <option value="co">CO</option>
    <option value="ct">CT</option>
    <option value="de">DE</option>
    <option value="fl">FL</option>
    <option value="ga">GA</option>
    <option value="hi">HI</option>
    <option value="id">ID</option>
    <option value="il">IL</option>
    <option value="in">IN</option>
    <option value="ia">IA</option>
    <option value="ks">KS</option>
    <option value="ky">KY</option>
    <option value="la">LA</option>
    <option value="me">ME</option>
    <option value="md">MD</option>
    <option value="ma">MA</option>
    <option value="mi">MI</option>
    <option value="mn">MN</option>
    <option value="ms">MS</option>
    <option value="mo">MO</option>
    <option value="mt">MT</option>
    <option value="ne">NE</option>
    <option value="nv">NV</option>
    <option value="nh">NH</option>
    <option value="nj">NJ</option>
    <option value="nm">NM</option>
    <option value="ny">NY</option>
    <option value="nc">NC</option>
    <option value="nd">ND</option>
    <option value="oh">OH</option>
    <option value="ok">OK</option>
    <option value="or">OR</option>
    <option value="pa">PA</option>
    <option value="ri">RI</option>
    <option value="sc">SC</option>
    <option value="sd">SD</option>
    <option value="tn">TN</option>
    <option value="tx">TX</option>
    <option value="ut">UT</option>
    <option value="vt">VT</option>
    <option value="va">VA</option>
    <option value="wa">WA</option>
    <option value="wv">WV</option>
    <option value="wi">WI</option>
    <option value="wy">WY</option>
  </select></td>
  </tr>
  <tr>
  <td colspan="2"><input type="submit" value="Save Your Information!"></td>
  </tr>
  </table>
  </div>
  <footer>Safe and friendly place to share your love of your pets with others! Design by Lindsey Schreiner.<br /> Forget your user name or password? <a href="##">Click here for help</a>.</footer>
</div>
</body>

我不知道我是否放错了地方，或者我错过了一些愚蠢的东西，但我已经找到了尽可能多的地方。如果有人可以帮我看看我错过了什么，我真的很感激，谢谢。

【问题讨论】：

不确定您的问题出在哪里，但也许您必须等待 javascript 才能加载页面内容？我的意思是将整个 js 包裹在 document.addEventListener("DOMContentLoaded", function(event) { //do work });
@andrusieczko - 他们已经在 <body> 标签的 onload 处理程序中这样做了。
您在浏览器错误控制台中看到任何脚本错误吗？
我在控制台中没有任何错误，老实说，当我在浏览器中测试它时，我只是得到......空白。这让我有点恼火。它是否需要在活动的网络服务器上才能真正保存为 cookie？

标签： javascript html cookies

【解决方案1】：

我看到三个主要问题：

1) - 您没有任何代码可以将当前输入的值保存为新的 cookie 值。您需要将“保存信息”按钮更改为不是提交按钮（您不希望它向服务器提交表单），而是将一个新函数连接到您编写的它将每个表单值保存到适当的 cookie。

2) 在页面初始化时，您正在设置每个 cookie，因此任何以前保存的值永远不会被使用，因为每次加载页面时您总是会覆盖它们。如果尚未保存任何值，则应仅保存初始 cookie 值。

3) 在getCookie() 函数中，您将参数声明为cookieFirstName，但随后似乎在函数中使用cookieName：

function getCookie(cookieFirstName) {
    var cookieValue = document.cookie;
    var cookieStartsAt = cookieValue.indexOf(" " + cookieName + "=");
    if (cookieStartsAt == -1) {
        cookieStartsAt = cookieValue.indexOf(cookieName + "=");
    }
    if (cookieStartsAt == -1) {
        cookieValue = null;
    } else {
        cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt) + 1;
        var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt);
        if (cookieEndsAt == -1) {
            cookieEndsAt = cookieValue.length;
        }
        cookieValue = unescape(cookieValue.substring(cookieStartsAt, cookieEndsAt));
    }
    return cookieValue;
}

大概应该是这样的：

function getCookie(cookieName) {
    var cookieValue = document.cookie;
    var cookieStartsAt = cookieValue.indexOf(" " + cookieName + "=");
    if (cookieStartsAt == -1) {
        cookieStartsAt = cookieValue.indexOf(cookieName + "=");
    }
    if (cookieStartsAt == -1) {
        cookieValue = null;
    } else {
        cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt) + 1;
        var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt);
        if (cookieEndsAt == -1) {
            cookieEndsAt = cookieValue.length;
        }
        cookieValue = unescape(cookieValue.substring(cookieStartsAt, cookieEndsAt));
    }
    return cookieValue;
}

仅供参考，我可以通过将您的代码粘贴到 http://jshint.com/ 并查看其报告来查看此错误。

虽然我个人使用这些经过良好测试的 cookie 功能：

// createCookie()
// name and value are strings
// days is the number of days until cookie expiration
// path is optional and should start with a leading "/" 
//   and can limit which pages on your site can 
//   read the cookie.
//   By default, all pages on the site can read
//   the cookie if path is not specified
function createCookie(name, value, days, path) {
    var date, expires = "";
    path = path || "/";
    if (days) {
        date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        expires = "; expires=" + date.toGMTString();
    }
    document.cookie = name + "=" + value + expires + "; path=" + path;
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

另外，escape() 和 unescape() 已被弃用，不应使用。您可以改用encodeURIComponent() 和decodeURIComponent()。

【讨论】：

好吧，很好地解决了这个错误，谢谢。不幸的是，它似乎仍然没有解决问题。这不是我需要上传到活动网络服务器才能看到正常工作的东西吗？
@Lindsey - 当用户点击“保存信息”时，您似乎没有任何代码可以将输入的值保存为 cookie。现在，您将该按钮标记为提交按钮，因此它正在尝试提交表单。那不是你想要的。您希望该按钮触发一个函数，该函数获取所有表单值并将每个值保存为适当的 cookie 值。
@Lindsey - 我现在在回答中记录了三个不同的问题。
感谢那些，我正在研究那些部分的教科书。
在保存信息部分的代码上，我之前尝试过通过放置一个 onClick 事件触发一个可以保存所有信息的事件，但它也不起作用。