HTML5 Game - Setting a Theme in Session Storage

  1. HOME
  2. HTML5 Game
  3. Local Storage
  4. Session Storage

Description

Setting a Theme in Session Storage

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
    <style>
        #themeContent {//from  w w w  . j av a 2  s . c  o  m
            background-color: #FFF;
            border-style: solid;
            border-width: 2px;
        }

        #themeSettings {
            margin: 10px;
        }
    </style>
    <script>
        let themeDiv; // output display div 

        function initTheme() {
            themeDiv = document.getElementById('theme');
            if (window.sessionStorage) {
                let btnResetTheme = document.getElementById('resetTheme');
                btnResetTheme.addEventListener('click', resetTheme, false);

                let selThemeColor = document.getElementById('themeColor');
                selThemeColor.addEventListener('change', setTheme, false);

                if (sessionStorage.themeColor) {

                    let themeColor = sessionStorage.getItem('themeColor');
                    document.getElementById(themeColor).selected = true;

                    applyTheme(themeColor);
                }
            } else {
                themeDiv.innerHTML = 'sessionStorage is not supported.';
            }
        }

        function setTheme() {

            let themeColor = document.getElementById('themeColor').value;
            try {
                sessionStorage.setItem('themeColor', themeColor);
                applyTheme(themeColor);
            } catch (err) {
                if (err.code == QUOTA_EXCEEDED_ERR) {
                    themeDiv.innerHTML = 'sessionStorage ran out of memory.';
                }
            }
        }

        function resetTheme() {
            sessionStorage.removeItem('themeColor');

            document.getElementById('default').selected = true;
            document.body.style.backgroundColor = '';
            themeDiv.innerHTML = 'Theme reset.';
        }

        function applyTheme(themeColor) {
            document.body.style.backgroundColor = themeColor;
            themeDiv.innerHTML = 'Theme ' + themeColor + ' applied. ';
        }

        window.addEventListener('load', initTheme, false);
    </script>
</head>

<body>
    <div id="themeContent">
        <div id="themeSettings">
            <H1>Page 1</H1>
            Choose Theme:
            <select id="themeColor">
                <option id="default" value="">Select color...</option>
                <option id="blue" value="blue">Blue</option>
                <option id="red" value="red">Red</option>
                <option id="yellow" value="yellow">Yellow</option>
                <option id="green" value="green">Green</option>
            </select>
            <button id="resetTheme">Reset Theme</button><br><br>
            <div id="theme"></div><br><br>
            <a href="page_2.html">Go To Page 2</a>
        </div>
    </div>
</body>

</html>

Showing the Theme Page 2 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>11.3 Showing the Theme - Page 2</title>
    <style>
        #themeContent {
            background-color: #FFF;
            border-style: solid;
            border-width: 2px;
        }

        #themeSettings {
            margin: 10px;
        }
    </style>
    <script>
        // initialize our page 
        function init() {

            // retrieve the saved theme color 
            let themeColor = sessionStorage.getItem('themeColor');
            applyTheme(themeColor);
        }

        // apply the theme to the page 
        function applyTheme(themeColor) {

            document.body.style.backgroundColor = themeColor;
            let themeDiv = document.getElementById('theme');
            themeDiv.innerHTML = themeColor + ' theme.';

        }

        // initialize the page 
        window.addEventListener('load', init, false);
    </script>
</head>

<body>
    <div id="themeContent">
        <div id="themeSettings">
            <H1>Page 2</H1>
            <div id="theme"></div>
            <br><br>
            <a href="page1.html">Go To Page 1</a>
        </div>
    </div>
</body>

</html>

Related Topic