<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<select name="sel1" id="sel1">
<option value="1">sel1-1</option>
<option value="2">sel1-2</option>
<option value="3">sel1-3</option>
<option value="4">sel1-4</option>
</select>
<select name="sel2" id="sel2">
<option value="1">sel2-1</option>
<option value="2">sel2-2</option>
<option value="3">sel2-3</option>
<option value="4">sel2-4</option>
</select>
<select name="sel3" id="sel3">
<option value="1">sel3-1</option>
<option value="2">sel3-2</option>
<option value="3">sel3-3</option>
<option value="4">sel3-4</option>
</select>
<select name="sel4" id="sel4">
<option value="1">sel4-1</option>
<option value="2">sel4-2</option>
<option value="3">sel4-3</option>
<option value="4">sel4-4</option>
</select>
</body>
</html>
window.onload = function () {
var selects = document.querySelectorAll('select');
for (var i = 0; i < selects.length; i++) {
// Add Event Listeners
selects[i].onchange = saveValueToStorage;
// Restore value
var id = selects[i].id;
if (localStorage.getItem(id)) {
selects[i].value = localStorage.getItem(id)
}
}
}
function saveValueToStorage (e) {
var caller = e.target || e.srcElement
var id = caller.id;
var value = caller.options[caller.selectedIndex].value;
localStorage.setItem(id, value)
}
/* Styles go here */