HTML5入门7---"session的会话缓存"和"localStorage的cookie"缓存数据
2015-12-22 16:40
671 查看
<!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>
相关文章推荐
- HTML5 学习笔记
- hadoop2.3cdh5.0.2 upgrade to hadoop2.5cdh5.5.0
- 6个超炫酷的HTML5电子书翻页动画
- Facebook将全站视频切换为H5: Flash注定被淘汰
- HTMl5的sessionStorage和localStorage
- HTML5 预览预加载文件,图片
- HTML5入门6---视频播放按钮
- Html5學習重點清單
- HTML5定稿一周年,你必须要重新认识HTML5了
- HTML5入门5---HTML5控件元素
- 40个重要的HTML5面试题及答案
- Admob广告cordova/phonegap插件使用教程
- 40个重要的HTML5面试题及答案
- HTML5学习笔记之HTML5Canvas图像动画的实现
- SpringMVC+Mybatis框架整合源码 项目 下载 rest websocket html5
- H5的学习笔记之HTML5Canvas画图标签&amp;画线,圆,渐变色
- 《 初学 》 html5 制作精灵表 坐标查看器
- 高德地图api之location定位
- HTML5入门4---HTML5 与 HTML4 同一网页的不同写法
- HTML5入门3---视频播放器