×

Error message

Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in menu_set_active_trail() (line 2405 of /customers/1/8/c/mywebhostel.com/httpd.www/helpdesk/includes/menu.inc).

How to capture and store URL parameters in Cookies

Create: 07/29/2018

This tutorial is an overview of how to capture URL parameters from the the url when a user submit a form and store them in cookies.

Parameters captured from a form will be able to use just in action page for the form, but to be able to use those parameters in other pages you can store them in cookies.

Example: 

http://mywebhostel.com/location/?filter_country=Morocco&filter_location=Agadir

In this example, we will capture and set 2 cookies:

  • filter_country
  • filter_location

 

Create the form

Parameters need to be added to the url using a form.

// Add parameters to the URL
<form action=""> 
      <input name="filter_country" type="hidden" value="Morocco" />
      <input name="filter_location" type="hidden" value="Casablanca" />
      <input type="submit" value="submit"/>
</form>

Install javascrip cookies

In order to set the cookie values, js-cookie must be on the page. In this example, i'm using jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

Parse the url

 Url parameters need to be parsed.

// Parse the URL

function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Assign URL parameters to a variable

Those variable are the values stored for cookies

// Give the URL parameters variable names
var country = getParameterByName('filter_country');
var city = getParameterByName('filter_location');

Creating cookies using JS cookies plugin

// Set the cookies
Cookies.set('filter_country', country);
Cookies.set('filter_location', city);

Putting all together

Your page should look like that

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>

// Parse the URL
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

// Give the URL parameters variable names
var country = getParameterByName('filter_country');
var city = getParameterByName('filter_location');

// Set the cookies
Cookies.set('filter_country', country);
Cookies.set('filter_location', city);

</script>

The result

To ensure the cookie values are being stored in the browser correctly, open up Developer Tools in Chrome and click on the Application tab.

The cookies should be visible in the console.

Ressourses

You can find a working example here: http://mywebhostel.com/location/

And find the code of this example in Github: https://github.com/mywebhostel/URL-Parameters-To-Cookies/

 

 

up
39 users have voted.