Communication between pages via Javascript

Question

I am developing a web app, where each page has an option to filter, for example, one for brands, then the models of these brands, after, the cars and then the years of the car chosen.

I would like to know a way to communicate these pages by passing the options chosen on each page without using PHP, only HTML and Javascript.

Opening another window to you, for example using the code below:

function selectCarro(carro){
  window.marca = carro;
  var b = window.open("modelos.html");
  $(b).load(function(){
  b.marca = marca;
  b.atualiza();
  return;
  });
}

The problem is if you open the page in the same window, for example with window.location or with open using _self.

Some solution??

Answer 1

One option I always suggest in such cases is the localStorage and that works in all most used browser.

localStorage saves a DOM string where you can put not only strings but also objects using JSON.stringify() and JSON.parse(). This data is saved under your domain and can be used in different tabs/windows if they are in the same browser. Data does not expire unless it is cleared via code or by the user using the browser developer tool. If you want this data to be cleaned when you close your browser, simply use the sessionStorage, deleting the data at the end of the session.

Simple example of use:

var filtros = [{
    marca: "VW",
    ano: "2015",
    modelo: "Gol"
}];

localStorage.setItem("filtros", JSON.stringify(filtros));

var filtrosSalvos = localStorage.getItem("filtros");

console.log("filtrosSalvos", filtrosSalvos);

Fiddle