Pass a clean cookie variable in Javascript / Vue JS

Question

My scenario is this.

I have the following variable:

_s.$cookie.set('videoURL', this.sample_url)

Now, when I looked into Chrome dev tools on Application -> Cookies, this is what I see.

As you may see, there is special characters in between the URLs, probably replacing the "/".

How do you clean this such that is passes a clean URL (eg. http://helloworld.com)?

UPDATE:

After the first answer below, I revised my code. However the same special characters still exist.

my code now is as follows. I'm using Vue JS.

  urlEncoded = encodeURIComponent('http://helloworld.com')
  decodeURL = decodeURIComponent(urlEncoded)
  _s.$cookie.set('videoURL', decodeURL)

UPDATE 2

After passing the cookie variable to class variable, finally saw that the URL is now clean of special characters.

  _s.videoURL = _s.$cookie.get('videoURL')
  console.log(_s.videoURL)

Encode/Decode the value, and do note, you can't store it as _a clean url_ since it has characters that aren't allowed in a cookie. Is there a reason why you bother how it looks in the cookie? — Asons, Jun 11 '18 at 07:08
You can parse them and deparse them wherever you are using them — Vaibhav Maheshwari, Jun 11 '18 at 07:09
@LGSon I'm trying to cached a video URL across different pages of the website. — vishnu, Jun 11 '18 at 08:38

Asons · Accepted Answer · 2018-06-11T08:51:06.207

1

You can't store it as a clean url since it has characters that aren't allowed in a cookie.

An option is to encode / decode the value when write/read the cookie

var url = "http://helloworld.com"
var url_encoded = encodeURIComponent(url)

console.log(url_encoded)

console.log(decodeURIComponent(url_encoded))

Updated after question edit, Vue JS is being used.

Here is two addons for Vue that might solve it for you

And as commented, to cached a video URL across different pages of the website, localStorage might be more appropriate.

edited Jun 11 '18 at 08:51

answered Jun 11 '18 at 07:23

Asons

This works in JSFiddle but applying this to my code still prompts the same output. I think I should note that I'm using Vue JS. – vishnu Jun 11 '18 at 08:39
@vishnu And you can't do `encodeURIComponent(this.sample_url)` ? – Asons Jun 11 '18 at 08:44
@vishnu And if not, will this help: https://github.com/alfhen/vue-cookie – Asons Jun 11 '18 at 08:46
@vishnu Or maybe `localStorage`, as it doesn't have the same issue a cookie has when it comes to allowed characters: https://www.npmjs.com/package/vue-localstorage – Asons Jun 11 '18 at 08:48
@vishnu Added those two addons to my answer as well – Asons Jun 11 '18 at 08:54
updated my question with my updated code. Same error exists – vishnu Jun 11 '18 at 08:59
@vishnu Well, you won't ever be able to have the value in the cookie to look clean, only so you know. Please provide how you read a cookie as well with Vue and I'll add a sample to answer how it should be, as what you did is not correct. – Asons Jun 11 '18 at 09:09

1 Answers1