CODEWITHSUNDEEP
javascriptcookies
abalter
abalter

Reputation: 10383

JavaScript: two equal strings not being equal

I'm playing around with learning to set and get cookies. I have a simple form where the user sets a cookie and then tries to retrieve the cookie value. I'm splitting the document.cookie string into parts and looking for an existing cookie name that matches a given name. When I get to the name I'm looking for, perhaps "a", I have a testing name "a" and a cookie piece equal to "a", but they are not registering as being equal.

In the form, enter "a", "b", 1 in the set cookie form, and "a" in the get cookie form. An alert will show what I mean.

Code below and at: http://plnkr.co/edit/Gy2uoEz1G5lYoub8oeE1?p=preview

I prefer jsfiddle, but it messes up the cookies.

index.html

<!doctype html>

    <html lang="en">
    <head>
      <meta charset="utf-8">

      <title>Cookie Test</title>
      <meta name="description" content="Cookie Test">

      <!--link rel="stylesheet" href="css/styles.css?v=1.0"-->

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

        <script src="cookie_test.js"></script>

        <script type="text/javascript">
          //$(document).ready(function(){alert("document ready");});
        </script>

    </head>

    <body>

        <form id="set-cookie-form">
        <fieldset>
                <legend>Set Cookie</legend>
                <label>Name</label>
                <input type="text" name="set-name" id="set-name" />
                <label>Value</label>
                <input type="text" name="set-value" id="set-value" />
                <label>Value</label>
                <input type="number" name="set-days" id="set-days" />
                <input type="button" name="set-cookie" id="set-cookie" value="Set Cookie" />
                <p>Cookie String: <span id="cookie-text"></span></p>
            </fieldset>
        </form>

        <form id="get-cookie-form">
            <fieldset>
                <legend>Get Cookie</legend>
                <label>Name</label>
                <input type="text" name="get-name" id="get-name" />
                <input type="button" name="get-cookie" id="get-cookie" value="Get Cookie" />
                <p>Cookie Value: <span id="cookie-value"></span></p>
            </fieldset>
        </form>

    </body>
    </html>

cookie_test.js

$(document).ready(function(){
    $('#set-cookie').on('click', function(){
        //alert("set cookie clicked");
        setCookie($('#set-name').val(), $('#set-value').val(), $('#set-days').val());
    });

    $('#get-cookie').on('click', function(){
        //alert("get cookie clicked");
        var value = getCookie($('#get-name').val());
        $('#cookie-value').text(value);
    });

});

function setCookie(name, value, num_days) {
    var cookie_text = name + "=" + value;
    var expires = "";
    if (num_days > 0) {
        var date = new Date();
        date.setTime(date.getTime() + (num_days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    cookie_text += expires + "; path=/";
    //alert(cookie_text);
    document.cookie = cookie_text;
    $('#cookie-text').text(cookie_text);
    //alert(document.cookie);
}

function getCookie(name) {
    //alert("get cookie " + name);
    var current_cookie = document.cookie;
    //alert("current cookie: " + current_cookie);
    var cookie_pieces = current_cookie.split(';');
    //alert(cookie_pieces[0]);
    for (var i = 0; i < cookie_pieces.length; i++) {
        //alert(cookie_pieces[i]);
        var key_val_pair = cookie_pieces[i].split("=");
        var current_key = key_val_pair[0];
        alert(
          "name="+name+";"+"type of name="+(typeof name)+";"
          +"current_key="+current_key+";"
          +"typeof current_key="+(typeof current_key)+";"
          +"(current_key==name)="+(current_key==name)
          );
        if (key_val_pair[0] == name) {
            alert("found it");
            $('#cookie-value').text(key_val_pair[1]);           
            return key_val_pair[1];
        }
    }
    return null;
}

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

Upvotes: 0

Views: 114

Answers (2)

user4698813
user4698813

Reputation:

Look closely at what alert(document.cookie) alerts. It seems that the key-value pairs in the string it returns are separated from each other by both, a semicolon (;), and a whitespace (). So you need to split by that.

Without doing so, your comparison looks like this, because that extra whitespace isn't being removed:

'a' == ' a' // False!

All you need to change is this line:

var cookie_pieces = current_cookie.split(';');

To this:

var cookie_pieces = current_cookie.split('; ');

http://plnkr.co/edit/WkBfD7pU10cMwJQxyIp0?p=preview

Upvotes: 3

Matt Patrick
Matt Patrick

Reputation: 31

From running it through it was returning the value of key_val_pair[0] on the iteration with " a" so when comparing it to "a" it then failed.

I have fixed it by adding a replace for the space and this fixes your issue. And I also fixed the variable names as you had current_key but then did the if statement as (key_val_pair[0] == name) so it would not check with the new formatting.

function getCookie(name) {
    //alert("get cookie " + name);
	var current_cookie = document.cookie;
	//alert("current cookie: " + current_cookie);
	var cookie_pieces = current_cookie.split(';');
	//alert(cookie_pieces[0]);
	for (var i = 0; i < cookie_pieces.length; i++) {
		//alert(cookie_pieces[i]);
		var key_val_pair = cookie_pieces[i].split("=");
		var current_key = key_val_pair[0].replace(" ", "");
		alert(
		  "name="+name+";"+"type of name="+(typeof name)+";"
		  +"current_key="+current_key+";"
		  +"typeof current_key="+(typeof current_key)+";"
		  +"(current_key==name)="+(current_key==name)
		  );
		if (current_key == name) {
			alert("found it");
			$('#cookie-value').text(current_key);			
			return current_key;
		}
	}
	return null;
}

Upvotes: 1

Related Questions