<!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" /> Value: <input type="text" id="txtValue" /><button id="btnSetLocal">Set local</button> <br /> <h1>Session</h1> <br /> Key: <input type="text" id="txtKey1" /> 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>