I could not see your example, but you can use IndexedDB.
for this you can store your filter in IndexedDB in the following format:
{
id: "<inteiro auto-incremental>"
timeA: "<nome do time A>",
timeB: "<nome do time B>",
selected: true/false
}
To create the database in IndexedDB, do the following:
var dbName = "filtros";
var db = null;
var request = indexedDB.open(dbName);
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore(dbName, { keyPath: "id", autoIncrement: true });
objectStore.createIndex("times", ["timeA", "timeB"], { unique: true });
objectStore.createIndex("selected", "selected", { unique: false });
};
request.onsuccess = function(event) {
db = request.result;
}
Here is an example of basic operations with IndexedDB:
Catch All Records:
var objectStore = db.transaction(dbName).objectStore(dbName);
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
var id = cursor.key;
var filtro = cursor.value
cursor.continue();
}
};
Paste Registration by ID:
var objectStore = db.transaction(dbName).objectStore(dbName);
var request = objectStore.get(id)
request.onsuccess = function(event) {
var filtro= request.result;
};
Insert Registry:
var objectStore = db.transaction(dbName).objectStore(dbName);
var request = objectStore.add(filtro)
request.onsuccess = function(event) {
filtro.id = event.target.result;
};
Update Registry:
var objectStore = db.transaction(dbName).objectStore(dbName);
var request = objectStore.put(filtro)
request.onsuccess = function(event) {
//registro atualizado.
};
Once this is done, you will have full control over the saved records.
Here is a complete example:
var filtros = document.getElementById("filtros");
var filtro = document.getElementById("filtro");
var timeA = document.getElementById("timeA");
var timeB = document.getElementById("timeB");
var salvar = document.getElementById("salvar");
var selected = null;
var dbName = "filtros";
var db = null;
var request = indexedDB.open(dbName);
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore(dbName, { keyPath: "id", autoIncrement: true });
objectStore.createIndex("times", ["timeA", "timeB"], { unique: true });
objectStore.createIndex("selected", "selected", { unique: false });
};
request.onsuccess = function(event) {
db = request.result;
var objectStore = db.transaction(dbName).objectStore(dbName);
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
var option = document.createElement("option");
option.value = cursor.key;
option.textContent = cursor.value.timeA + " x " + cursor.value.timeB;
filtros.appendChild(option);
if (cursor.value.selected) {
selected = cursor.value;
filtros.selectedIndex = filtros.options.length - 1;
filtro.disabled = "disabled";
timeA.value = selected.timeA;
timeB.value = selected.timeB;
}
cursor.continue();
}
};
};
var atualizarFiltro = function () {
var newSelected = parseInt(filtros.options[filtros.selectedIndex].value);
filtro.disabled = newSelected != 0;
if (newSelected != 0) {
var objectStore = db.transaction([dbName], "readwrite").objectStore(dbName);
var request = objectStore.get(newSelected)
request.onsuccess = function(event) {
var selected = request.result;
timeA.value = selected.timeA;
timeB.value = selected.timeB;
selected.selected = true;
objectStore.put(selected);
};
} else {
timeA.value = "";
timeB.value = "";
}
}
filtros.addEventListener("change", function () {
if (selected) {
var objectStore = db.transaction([dbName], "readwrite").objectStore(dbName);
selected.selected = false;
var request = objectStore.put(selected);
request.onsuccess = function(event) {
atualizarFiltro();
};
} else {
atualizarFiltro();
}
});
salvar.addEventListener("click", function () {
if (timeA.value && timeB.value && timeA.value != timeB.value) {
var registro = { timeA: timeA.value, timeB: timeB.value, selected: true };
var objectStore = db.transaction([dbName], "readwrite").objectStore(dbName);
var request = objectStore.add(registro);
request.onsuccess = function(event) {
registro.id = event.target.result;
var selected = registro;
var option = document.createElement("option");
option.value = selected.id;
option.textContent = registro.timeA + " x " + registro.timeB;
filtros.appendChild(option);
filtros.selectedIndex = filtros.options.length - 1;
filtro.disabled = "disabled";
};
request.onerror = function(event) {
alert(event.srcElement.error.message);
};
}
});
.linha {
margin-bottom: 5px;
}
fieldset {
padding: 0px;
margin: 0px;
border: 0px none transparent;
}
<div class="linha">
<label for="filtros">Filtros:</label>
<select id="filtros">
<option value="0">Novo Filtro</option>
</select>
</div>
<div class="linha">
<fieldset id="filtro">
<label>
Time A:
<input id="timeA" type="text" list="times" />
</label>
x
<label>
Time B:
<input id="timeB" type="text" list="times" />
</label>
<input id="salvar" type="button" value="Salvar" />
</fieldset>
</div>
<datalist id="times">
<option>Ice Blood</option>
<option>Renascitur</option>
<option>JPHS</option>
<option>Fitnns</option>
</datalist>
The above example does not work because of a StackOverFlow Snippet limitation, but you can check the same in JSFiddle