Storing Spaces and Colons in Cookie JavaScript

Question

I am making a webpage with a form that saves the data you type in cookies in case you accidentally close the tab or navigate away before submitting.

I would like to know if there is a way to allow whitespace and colons to be in my cookie's data? For instance if user types "test test", on refresh the cookie will be stored and displayed as "test%2520test". Similarly colons display as "%3A". I believe this is possible with using encodeURIComponent but I am not sure exactly how. Below I will include my saveVideo, setCookie, and readCookie JS functions as well as an example input field.

Also, bonus question: What would be the best way to delete each cookie's data upon submit of the form?

<input id="video" name="video" type="text" onchange="saveVideo(this.value);"/>

function saveVideo(cookieValue)
        {
            var sel = document.getElementById('video');

            saveclass = saveclass ? saveclass : document.body.className;
            document.body.className = saveclass + ' ' + sel.value;

            setCookie('video', cookieValue, 1   );
        }   


function setCookie(cookieName, cookieValue, nDays) {
            var today = new Date();
            var expire = new Date();

            if (nDays==null || nDays==0)
                nDays=1;

            expire.setTime(today.getTime() + 60 * 60 * 1000);
            document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString();
        }


function readCookie(name) {
          var nameEQ = name + "=";
          var ca = document.cookie.split(';');
          for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
          }
          return null;
        }

        </script>

Any tips, pointers, general help is much appreciated!

You've already found the encodeURIComponent function. Now check out it's inverse: decodeURIComponent — Mike Cluck
– Mike Cluck, Commented May 30, 2017 at 19:31
check out the Storage API in modern Browsers. Like the sessionStorage for example. — Thomas
– Thomas, Commented May 30, 2017 at 20:05

gaganshera · Accepted Answer · 2017-05-30 19:32:23Z

1

Just change your code to following in the readCookie function, using decodeURIComponent:

return decodeURIComponent(c.substring(nameEQ.length, c.length));

answered May 30, 2017 at 19:32

gaganshera

2,6372 gold badges16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nathan Brown Over a year ago

Wow, I didn't think it would be this easy, thanks! While I have you, what would be the most efficient way to delete multiple cookies on form submit?

gaganshera Over a year ago

Do you need a delete cookie function? Or do you need a multiple delete function?

Nathan Brown Over a year ago

Ideally a multiple function, where I can easily delete a list of seperate cookies. Thanks.

gaganshera Over a year ago

Deleting a cookie is easy, just ask for an array of cookie names and loop on it to do something like this: document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';

Nathan Brown Over a year ago

Thanks for all the help!

Collectives™ on Stack Overflow

Storing Spaces and Colons in Cookie JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related