Displaying Cookies On A Website Using Javascript

So I have an assignment I've been working on for 6 hours. I'm supposed to use JavaScript to create a cookie and display the cookie information on the user profile page of a website

Solution 1:

I see three main issues:

1) - You don't have any code to save the currently entered values as new cookie values. You need to change the "Save Information" button to not be a submit button (you don't want it submitting a form to the server) and instead hook up a new function to it that you write that will save each form value to the appropriate cookie.

2) Upon page initialization, you are setting every cookie so any previously saved values can never be used because you always overwrite them every time the page is loaded. You should only save initial cookie values if there are no values already saved.

3) In the getCookie() function, you declare the argument as cookieFirstName, but then appear to be using cookieName in the function:

functiongetCookie(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;
}

Presumably, it should be this:

functiongetCookie(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;
}

FYI, I was able to see this error by pasting your code into http://jshint.com/ and looking at its report.

---

Though personally, I use these well tested cookie functions:

// 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 specifiedfunctioncreateCookie(name, value, days, path) {
    var date, expires = "";
    path = path || "/";
    if (days) {
        date = newDate();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        expires = "; expires=" + date.toGMTString();
    }
    document.cookie = name + "=" + value + expires + "; path=" + path;
}

functionreadCookie(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);
    }
    returnnull;
}

functioneraseCookie(name) {
    createCookie(name, "", -1);
}

Also, escape() and unescape() have been deprecated and should not be used. You can use encodeURIComponent() and decodeURIComponent() instead.