Angular cookies appearing with encoded characters

Question

Given some data:

$scope.devices = [
  { name: 'iPhone 4', os: 'iOS'},
  { name: 'Nexus 7', os: 'Android'},
];

And a function to set a cookie:

$scope.saveDeviceChoice = function() {
  $cookieStore.put('savedDevice', $scope.deviceChoice.name);
}

I get a cookie with value %22Nexus%207%22 instead of what I would expect: Nexus 7.

This is what it looks like in the web inspector

I am truly puzzled - it seems that %22 is a quote and %20 is a space, somehow the value gets saved "encoded". Who knows what is going on?

Answer 1

Here is the official doc for $cookieStore:

Provides a key-value (string-object) storage, that is backed by session cookies. Objects put or retrieved from this storage are automatically serialized or deserialized by angular's toJson/fromJson.

Then the store save the URL encoded version of the value. Take a look at this article, there is a section explaining the cookie encoding.