<!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>