Listing 2: Setting a theme in session storage
<!DOCTYPE html> <br>
<html><br>
<head><br>
<meta charset="UTF-8" /><br>
<title>11.2 Theme Selector - Page 1</title><br>
<style><br>
#themeContent {<br>
background-color:#FFF;<br>
border-style:solid;<br>
border-width:2px;<br>
}<br>
#themeSettings {<br>
margin:10px;<br>
}<br>
</style><br>
<script><br>
<br>
var themeDiv; // output display div<br>
<br>
// function to initialize the theme<br>
function initTheme() {<br>
<br>
// set our div reference for output<br>
themeDiv = document.getElementById('theme');<br>
<br>
// check if our browser supports sessionStorage<br>
if (window.sessionStorage) {<br>
<br>
// set the button handler<br>
var btnResetTheme = document.getElementById('resetTheme');<br>
btnResetTheme.addEventListener('click',resetTheme,false);<br>
<br>
// set the select list change handler<br>
var selThemeColor = document.getElementById('themeColor');<br>
selThemeColor.addEventListener('change',setTheme,false);<br>
<br>
// check if we have previously set the theme color<br>
if (sessionStorage.themeColor) {<br>
<br>
// set the initial theme color<br>
var themeColor = sessionStorage.getItem('themeColor');<br>
document.getElementById(themeColor).selected = true;<br>
<br>
applyTheme(themeColor);<br>
}<br>
} else {<br>
themeDiv.innerHTML = 'sessionStorage is not supported.';<br>
}<br>
}<br>
<br>
// set the chosen theme<br>
function setTheme() {<br>
<br>
// retrieve the theme color selected<br>
var themeColor = document.getElementById('themeColor').value;<br>
<br>
// use our try catch and set the theme color<br>
try {<br>
sessionStorage.setItem('themeColor',themeColor);<br>
applyTheme(themeColor);<br>
}<br>
catch(err){<br>
// error code 22 QUOTA_EXCEEDED_ERR says we ran out of space<br>
if(err.code == QUOTA_EXCEEDED_ERR){<br>
themeDiv.innerHTML = 'sessionStorage ran out of memory.';<br>
// perform any other handling we want to here<br>
}<br>
}<br>
}<br>
<br>
// function to reset the theme color<br>
function resetTheme() {<br>
// remove the item from the session storage<br>
sessionStorage.removeItem('themeColor');<br>
<br>
// reset display<br>
document.getElementById('default').selected = true;<br>
document.body.style.backgroundColor = '';<br>
themeDiv.innerHTML = 'Theme reset.';<br>
}<br>
<br>
// apply a theme to the page<br>
function applyTheme(themeColor) {<br>
document.body.style.backgroundColor = themeColor;<br>
themeDiv.innerHTML = 'Theme ' + themeColor + ' applied. ';<br>
}<br>
<br>
// initialize our window<br>
window.addEventListener('load',initTheme,false);<br>
<br>
</script><br>
</head><br>
<body><br>
<div id="themeContent"><br>
<div id="themeSettings"><br>
<H1>Page 1</H1><br>
Choose Theme: <br>
<select id="themeColor"><br>
<option id="default" value="">Select color...</option><br>
<option id="blue" value="blue">Blue</option><br>
<option id="red" value="red">Red</option><br>
<option id="yellow" value="yellow">Yellow</option><br>
<option id="green" value="green">Green</option><br>
</select><br>
<button id="resetTheme">Reset Theme</button><br><br><br>
<div id="theme"></div><br><br><br>
<a href="11_3_theme_page_2.html">Go To Page 2</a><br>
</div><br>
</div><br>
</body><br>
</html>
After setting the theme on page 1, which is in Listing 2, you can verify that the theme has been stored by loading a different page that reads the storage and uses the theme information to set the proper theme. Use the following steps and Listing 3 to create the second page to show the theme color previously selected:
- Create a new page based on Listing 3 with the appropriate sections.
- Modify the page's a tag in both pages to correspond to the name of your pages so that you can navigate back and forth between the pages.