Question

我正在学习设置和获取cookie。我有一个简单的表单，用户设置cookie，然后尝试检索cookie值。我将document.cookie字符串拆分为多个部分，并查找与给定名称匹配的现有Cookie名称。当我找到我正在寻找的名字时，或许"a"，我有一个测试名称"a"和一个等于"a"的cookie片段，但他们没有注册为相等。

在表单中，在设置的Cookie表单中输入＆＃34; a＆＃34;，＆＃34; b＆＃34;，1，＆＃34; a＆＃34;在获取cookie表单中。警报将显示我的意思。

以下代码和http://plnkr.co/edit/Gy2uoEz1G5lYoub8oeE1?p=preview

我更喜欢jsfiddle，但它会弄乱饼干。

的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);
}

Answer 1

仔细查看alert(document.cookie)警报。似乎它返回的字符串中的键值对彼此分开，分号（;）和空格（）。所以你需要分开。

如果不这样做，你的比较看起来像这样，因为没有删除额外的空格：

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

您需要更改的是此行：

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

到此：

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

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

Answer 2

从运行它开始，在＆＃34;的迭代中返回key_val_pair [0]的值。一个＆＃34;所以当它与＆＃34; a＆＃34;然后失败了。

我已经通过添加替换空间来修复它，这可以解决您的问题。我还修改了变量名称，因为你有current_key，但后来把if语句作为（key_val_pair [0] == name），所以它不会检查新的格式。

＆＃13;

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

＆＃13;

JavaScript：两个相等的字符串不相等

2 个答案: