HTML5 Game - Local Storage Session Storage

Introduction

Session storage stores the data is private to each browsing context and is removed when the document is closed.

We access session storage through the sessionStorage global variable.

It returns a Storage object.

Demo

<!DOCTYPE HTML>
<html>
    <body>
        <div>
            <div><label>Key:</label><input id="key" placeholder="Enter Key"/></div>            
            <div><label>Value:</label><input id="value" placeholder="Enter Value"/></div>
            <div id="buttons">
                <button id="add">Add</button>
                <button id="clear">Clear</button>
            </div>
            <p id="countmsg">There are <span id="count"></span> items</p>
        </div>
        /*w  ww  .ja v  a 2  s.  co m*/
        <table id="data" border="1">
            <tr><th>Item Count:</th><td id="count">-</td></tr>
        </table>

        <script>        
            displayData();
            
            let buttons = document.getElementsByTagName("button");
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }
            
            function handleButtonPress(e) {
                switch (e.target.id) {
                    case 'add':
                        let key = document.getElementById("key").value;
                        let value = document.getElementById("value").value;            
                        sessionStorage.setItem(key, value);
                        break;
                    case 'clear':
                        sessionStorage.clear();
                        break;
                }
                displayData();
            }
         
            function displayData() {
                let tableElem = document.getElementById("data");
                tableElem.innerHTML = "";
                let itemCount = sessionStorage.length;
                document.getElementById("count").innerHTML = itemCount;
                for (let i = 0; i < itemCount; i++) {
                    let key = sessionStorage.key(i);
                    let val = sessionStorage[key];
                    tableElem.innerHTML += "<tr><th>" + key + ":</th><td>"
                        + val + "</td></tr>";    
                }
            }
        </script>
    </body>
</html>

HTML5 Game - Local Storage Session Storage

Introduction

Demo

Related Topics