Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Piotr Manczak
Front End Web Development Techdegree Graduate 29,363 PointsUsing localStorage to store html element of <option>.
I am trying to use localStorage of the browser to save setting for a website. What I have to save is a time zone which is a <option> of a <select> element. I can extract and log to the console <option> element using addEventListener and a loop however whrn I try to store this <option> element in the localStorage is shows an Object.
const array = document.querySelectorAll('#myList option');
const timeZoneList = document.getElementById('myList');
timeZoneList.addEventListener('click', (event) => {
let currentArea = event.target.value;
for ( let i =0; i<array.length; i++ ) {
let currentOption = array[i];
if ( currentArea == currentOption.value ) {
console.log(currentOption);
}
}
});
and html
<div class="dropdown">
<select id = "myList">
<option disabled selected>Select a Timezone</option>
<option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option>
<option value="-11:00">(GMT -11:00) Midway Island, Samoa</option>
<option value="-10:00">(GMT -10:00) Hawaii</option>
<option value="-09:50">(GMT -9:30) Taiohae</option>
<option value="-09:00">(GMT -9:00) Alaska</option>
<option value="-08:00">(GMT -8:00) Pacific Time (US & Canada)</option>
<option value="-07:00">(GMT -7:00) Mountain Time (US & Canada)</option>
<option value="-06:00">(GMT -6:00) Central Time (US & Canada), Mexico City</option>
<option value="-05:00">(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima</option>
<option value="-04:50">(GMT -4:30) Caracas</option>
<option value="-04:00">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
<option value="-03:50">(GMT -3:30) Newfoundland</option>
<option value="-03:00">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
<option value="-02:00">(GMT -2:00) Mid-Atlantic</option>
<option value="-01:00">(GMT -1:00) Azores, Cape Verde Islands</option>
<option value="+00:00">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
<option value="+01:00">(GMT +1:00) Brussels, Copenhagen, Madrid, Paris</option>
<option value="+02:00">(GMT +2:00) Kaliningrad, South Africa</option>
<option value="+03:00">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
<option value="+03:50">(GMT +3:30) Tehran</option>
<option value="+04:00">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
<option value="+04:50">(GMT +4:30) Kabul</option>
<option value="+05:00">(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
<option value="+05:50">(GMT +5:30) Bombay, Calcutta, Madras, New Delhi</option>
<option value="+05:75">(GMT +5:45) Kathmandu, Pokhara</option>
<option value="+06:00">(GMT +6:00) Almaty, Dhaka, Colombo</option>
<option value="+06:50">(GMT +6:30) Yangon, Mandalay</option>
<option value="+07:00">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
<option value="+08:00">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
<option value="+08:75">(GMT +8:45) Eucla</option>
<option value="+09:00">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
<option value="+09:50">(GMT +9:30) Adelaide, Darwin</option>
<option value="+10:00">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
<option value="+10:50">(GMT +10:30) Lord Howe Island</option>
<option value="+11:00">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
<option value="+11:50">(GMT +11:30) Norfolk Island</option>
<option value="+12:00">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
<option value="+12:75">(GMT +12:45) Chatham Islands</option>
<option value="+13:00">(GMT +13:00) Apia, Nukualofa</option>
<option value="+14:00">(GMT +14:00) Line Islands, Tokelau</option>
</select>
</div>
4 Answers
Steven Parker
231,269 PointsThe "currentOption" is an HTML element, perhaps you meant to use the "currentArea"? That would also make the loop and the option array unnecessary.
Also, a better event for selects is "change", since "click" will fire even before a choice is made.
Piotr Manczak
Front End Web Development Techdegree Graduate 29,363 PointsNot yet, I am at work at the moment . I'll try tomorrow. I will let you know. Thanks.
Piotr Manczak
Front End Web Development Techdegree Graduate 29,363 PointsYes, it is working. Thanks for your help and suggestions.
Piotr Manczak
Front End Web Development Techdegree Graduate 29,363 Pointsconst timeZoneList = document.getElementById('myList');
timeZoneList.addEventListener('change', (event) => {
let currentArea = event.target.value;
localStorage.setItem('localization', currentArea);
});
if ( localStorage.getItem('localization')) {
timeZoneList.value = localStorage.getItem('localization');
}
What do you think Mr Parker?
Steven Parker
231,269 PointsLooks like it would work, have you tried it?