Menu
Community /Pin to ProfileBookmark
@daveyerwinOct 21.2021 — #@k33npx#1638400
Session storage
Hi,
I have a project where I want visitors to a site to pick the Tariff that is appropriate to them and then I will display relevant content to them while hiding the drop down to change between tariffs. I would like this selection to stay over multiple pages but then reset when they close the browser and start again.
So far I have managed to show multiple hidden divs based on a selection and then hide the selection box itself. I may have managed to save the selection as a session, however I am struggling to work out how to recall that saved information on a page refresh. I also assume that once I can recall it for a page refresh I can then apply the same code to different pages in my site which have the same drop down (as you never know where people will start their browsing) and it will remember the selection.
In my example I am expecting to need to save a selection i.e. 3 that has the value t3 and then recall this saved value if it exists on page refresh to retain the selection of 3 and keep those divs displayed etc…
I am very new to javascript so be gentle with me, here is my fiddle
I hope that all makes sense and thanks in advance for your help
Sign in
to post a comment2 Comments(s) ↴
0
@daveyerwinOct 21.2021 — #``<i>
</i><style>
.t1
{display: none}
.t2
{display: none}
.t3
{display: none}
.t4
{display: none}
.t5
{display: none}
</style>
<h4>Your Tariff</h4>
<div>
<br>
<select class="select" id="select">
<option>Choose Your Development</option>
<option name="Tarrif 1" value="t1"> 1</option>
<option name="Tarrif 2" value="t2"> 2</option>
<option name="Tarrif 3" value="t3"> 3</option>
<option name="Tarrif 4" value="t4"> 4</option>
<option name="Tarrif 5" value="t5"> 52</option>
</select>
<br>
<span id="current"></span>
<div class="t1"><p>Tariff 1......</p></div>
<div class="t2"><p>Tariff 2......</p></div>
<div class="t3"><p>Tariff 3.....</p></div>
<div class="t3"><p>Tariff 3 extra information</p></div>
<div class="t4"><p>Tariff 4......</p></div>
<div class="t5"><p>Tariff 5......</p></div>
<div class="t5"><p>Some more information</p></div>
<script>
function showSelectedItem() {
var itemSelect = document.getElementById("select");
var description = itemSelect.options[itemSelect.selectedIndex].text;
document.getElementById("current").textContent = description;
}
function setDisplay(className, displayValue) {
var items = document.getElementsByClassName(className);
for (var i=0; i < items.length; i++) {
items[i].style.display = displayValue;
}
}
function showbox() {
var itemSelect = document.getElementById("select");
var boxName = itemSelect.options[itemSelect.selectedIndex].value;
setDisplay(boxName, "block");
setDisplay("select", "none");
}
function setItem(){
var itemSelect = document.getElementById("select");
var itemSelect = itemSelect.options[itemSelect.selectedIndex].value;
sessionStorage.setItem("itemSelect", itemSelect);
}
document.getElementById("select").addEventListener("change",() => {
showSelectedItem();
setDisplay();
showbox();
setItem();
});
var item = sessionStorage.getItem("itemSelect");
if(item)document.getElementsByClassName(item)[0].style.display='block';
</script><i>
</i>``