When I turn document.cookie into an array, and then use conditional statement with indexof, it works only for the first value. Why?

Question

It's hard to even describe the question. I can't reproduce a snippet, obviously because it requires using cookies, but I will try to reproduce it with a normal array, and show you how it should work, then I'll show you screenshots of my code, and the outcome it produces when used on real cookies.

function cookiename(name) { 
//var test5 = document.cookie.split(";");
var test5 = ["user=Jim Jordan", "color=blue", "cat=bella", "username=NikoaTesla"];
var username2 = name;   
var output = "";

if(test5[0].indexOf("user") == 0) { 
   output = test5[0].substring(username2.length, test5[0].length);
 } else alert("IT DOES NOT WORK");


alert(output);

}

cookiename("user");

This is pretty much what my code looks like, except that, instead of array, test5 is assigned to document.cookie.split(";"), and it contains two more cookies.

Now, the way it works is, you create a conditional statement with the array value, in this case, test5[0], which contains the value "user=Jim Jordan", and say, if the indexof("user") string is in position 0 inside the test5[0] string, which contains the value user=Jim Jordan, then execute the condition, if not, alert that it doesn't work.

Now, as you saw, it works great in the above example. It works as expected with any of the other array values. test5[1], test5[2] etc. will work the same way, of course in the above example they won't match the condition, but if you change the indexof string, it works.

Now, the issue I have is that, the test5 variable stores the document.cookie.split(";") array, and only the first array value works, while the others don't, even though the condition should be matching. However, the other values do work but only if the indexof string is intentionally wrong, and doesn't exist inside the array value, and the condition is of course -1. If the indexof string actually exists, both 0 and -1 conditions don't match. Very strange.

Here's a screenshot of my code, and subsequent result:

First array value

So, as you can see, the first value works as expected.

But then, when I try with another array value, it doesn't work. The third array value is called username=Sam Jones. This is what happens when I change indexof("user") with indexof("username").

Third array value

As you can see, the prior alert that I inserted displays that test5[2] contains the value of username=Sam Jones, but then when use it as a condition, the indexof("username") does not match it. It should be 0, but it's not. Even when I try -1, instead of 0, which matches strings that do not exist, it still produces the exact same outcome! Why!?

Now, watch what happens when I add a string in indexof that does not exist. Instead of the string username, I will add something random, and use -1 as a condition.

Different indexof string on Third array value

As you see, now the random indexof string matches the -1, because it doesn't exist. But why when the indexof string actually does exist, neither 0 nor -1 match the condition?

Why only the first array value work?

Does anyone have any idea what is happening here?

Answer 1

What you want is to find cookies starting with name, correct?

Firstly, you are probably aware, but it is good to note that if your cookies come this way: cookies = "user=Jim Jordan; color=blue; cat=bella; username=NikoaTesla";, you have to split for "; " instead of just ";".

Once your splits are correct, already without any leading spaces, you only need:

test5.filter(c=>c.trim().startsWith("user"));

I believe startsWith is cleaner than using indexOf.

Another solution, without split:

For the "; " case:

const cookiestr='; '+cookies+';';
while (true) { i=cookiestr.indexOf('; user',i+1); if (i<0) break; console.log(cookiestr.substring(i+2,cookiestr.indexOf(';',i+1))); }

For the ";" case:

const cookiestr=';'+cookies+';';
while (true) { i=cookiestr.indexOf(';user',i+1); if (i<0) break; console.log(cookiestr.substring(i+1,cookiestr.indexOf(';',i+1))); }

Answer 2

Your approach is flawed since you are expecting that the cookie will always be in the same order. You are also checking for the start of a string equals. When you have user, it will also match username. You are not accounting for the = and you are not removing the encoding.

So to do it with your approach with indexOf and substring, you would need to loop over and check that it has a match

function getCookie(key) {
  // var myCookies = document.cookie.split(/;\s?/g);
  var myCookies = ["user=Jim%20Jordan", "color=blue", "cat=bella", "username=NikoaTesla"];
  for (var i = 0; i < myCookies.length; i++) {
    var current = myCookies[i];
    if (current.indexOf(key + "=") === 0) {
      return decodeURIComponent(current.substr(key.length+1));
    }
  }
}

console.log('user', getCookie('user'));
console.log('username', getCookie('username'));
console.log('funky', getCookie('funky'));

Most approaches would use a regular expression.

function getCookie(key) {
  // var myCookies = document.cookie;
  var myCookies = "user=Jim%20Jordan;color=blue;cat=bella;username=NikoaTesla";
  var cookieValue = myCookies.match(`(?:(?:^|.*; *)${key} *= *([^;]*).*$)|^.*$`)[1]
  return cookieValue ? decodeURIComponent(cookieValue) : null;
}

console.log('user', getCookie('user'));
console.log('username', getCookie('username'));
console.log('funky', getCookie('funky'));

If I have to read multiple values I would map it to an object

function getCookieValues() {
  // var myCookies = document.cookie.split(/;\s?/g);
  var myCookies = ["user=Jim%20Jordan", "color=blue", "cat=bella", "username=NikoaTesla"];
  return myCookies.reduce(function (obj, item) {
    var parts = item.split("=");
    obj[parts[0]] = decodeURIComponent(parts[1]);
    return obj;
  }, {});
}

var myCookies = getCookieValues();
console.log('user', myCookies['user']);
console.log('username', myCookies['username']);
console.log('funky', myCookies['funky']);

Answer 3

In your conditional, test5[2] = “cat=bella”, not “username=NikolaTesla”. That’s at index 3. Could try that? Also check for white spaces being being added to the front of end of each string like someone mentioned already.