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?

Ye Liu · Answer 1 · 2013-06-10T16:11:31.683

7

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.

edited Jun 10 '13 at 16:11

answered Jun 10 '13 at 16:06

Ye Liu

8,946
1
38
34

this is a pain when reading the cookie from backend you have to decode it back to be able to use it – Geomorillo Mar 17 '17 at 16:50

score 4 · Answer 2 · answered Aug 08 '14 at 14:40

$cookieStore.(get/put) automatically run to/from Json on the value you send over, which appends the encoded characters.

If you were to just use $cookies then you can get away with setting your parameters as such

$cookies['savedDevice'] = $scope.deviceChoice.name;

or

$cookies.savedDevice = $scope.deviceChoice.name;

Either way, the values are saved just like you want em to be.

Usage of $cookieStore is popular, however comes with it's own baggage if you want to use the values on the server.

Angular cookies appearing with encoded characters

2 Answers2