HTML5入门7---"session的会话缓存"和"localStorage的cookie"缓存数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第六个页面</title>
        <style>
            body{
                font-family: "微软雅黑";
                max-width: 600px;
                padding: 0px 30px;
            }
            fieldset{
                margin-bottom: 15px;
                padding: 10px;
            }
            legend{
                padding: 0px 3px;
                font-weight: bold;
                font-variant: small-caps;
            }
            label{
                width:140px;
                display: inline-block;
                vertical-align: top;
                margin: 6px;
            }
            input{
                margin-top: 12px;
                width: 300px;
            }            
        </style>
        <script type="text/javascript">
            function saveData(){
                var name = document.getElementById("name");
                var age = document.getElementById("age");
                localStorage.setItem("localData",name.value);
                sessionStorage.setItem("sessionData",age.value);                
            }
            function loadData(){
                var name = document.getElementById("name");
                var age = document.getElementById("age");
                var localData = localStorage.getItem("localData");
                var sessionData = sessionStorage.getItem("sessionData");
                if(localData != null){
                    name.value = localData;
                }
                if(sessionData != null){
                    age.value = sessionData;
                }
            }
        </script>
    </head>
    <body>
        <fieldset>
            <legend>Web Storage</legend>
            <label>姓名</label>
            <input id="name" type="text" value="" /><br/>
            <label>年龄</label>
            <input id="age" type="number" value="" />            
        </fieldset>
        <div>
            <button onclick="saveData()">Save</button>
            <button onclick="loadData()">Load</button>
        </div>
    </body>
</html>
posted on 2015-12-22 16:40 让编程成为一种习惯阅读(270) 评论(0) 收藏举报