<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="./abvw/common/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="./abvw/common/js/jquery-ui-1.8.23.custom.min.js"></script>
    <!--<script src="abvw/common/js/common.js" type="text/javascript"></script>-->

    <script type="text/javascript">
        function ShowLocalStorage() {
            $("#divLocalStorage").html("");
            $("#divLocalStorage").append("<h3>Local Storage List</h3>");
            var localStorageKeys = Object.keys(localStorage);
            for (var nIndex = 0; nIndex < localStorageKeys.length; nIndex++) {
                var strKey = localStorageKeys[nIndex];
                var item = "";
                item += "<div>";
                item += "<li>" + strKey + "<br/>->" + localStorage.getItem(strKey) + "</li>";
                item += "</div>";
                $("#divLocalStorage").append(item);
            }
        }

        function ShowSessionStorage() {
            $("#divSessionStorage").html("");
            $("#divSessionStorage").append("<h3>Session Storage List</h3>");
            var sessionStorageKeys = Object.keys(sessionStorage);
            
            for (var nIndex = 0; nIndex < sessionStorageKeys.length; nIndex++) {
                var strKey = sessionStorageKeys[nIndex];
                var item = "";
                item += "<div>";
                item += "<li>" + strKey + "<br/>->" + sessionStorage.getItem(strKey) + "</li>";
                item += "</div>";
                $("#divSessionStorage").append(item);
            }
        }

        $(document).ready(function () {
            $("#btnShowLocalStorage").click(function () { ShowLocalStorage(); });
            $("#btnClearLocalStorage").click(function () { localStorage.clear(); ShowLocalStorage(); });

            $("#btnShowSessionStorage").click(function () { ShowSessionStorage(); });
            $("#btnClearSessionStorage").click(function () { sessionStorage.clear(); ShowSessionStorage(); });

            $("#btnSetLocal").attr('disabled', 'disabled');
            $("#btnSetSession").click(function () {
                var strKey = $("#txtKey1").val() + "";
                var strValue = $("#txtValue1").val() + "";
                if (strKey != "") {
                    sessionStorage.setItem(strKey, strValue);

                }
            });
        });
        
    </script>
</head>
<body>
    <h1>Local</h1> <br />
    Key: <input type="text" id="txtKey" />&nbsp;Value: <input type="text" id="txtValue" /><button id="btnSetLocal">Set local</button>
    <br />
    <h1>Session</h1> <br />
    Key: <input type="text" id="txtKey1" />&nbsp;Value: <input type="text" id="txtValue1" /><button id="btnSetSession">Set session</button>
    <table>
        <tr>
            <td style="vertical-align: top;">
                <button id="btnShowLocalStorage" >Show local storage</button>
                <button id="btnClearLocalStorage" >Clear local storage</button>
                <div id="divLocalStorage">
                    <h3>Local Storage List</h3>
                </div>
            </td>
            <td style="vertical-align: top;">
                <button id="btnShowSessionStorage" >Show session storage</button>
                <button id="btnClearSessionStorage" >Clear session storage</button>
                <div id="divSessionStorage">
                    <h3>Session Storage List</h3>
                </div>
            </td>
        </tr>
    </table>
    
</body>
</html>