摘要:本篇HTML5教程探讨了HTML5中的本地存储,希望阅读本篇文章以后大家有所收获,帮助大家对HTML5的理解更加深入。
简单存储
HTML5 提供了四种在客户端存储数据的新方法,即localStorage 、sessionStorage、globalStorage、WebSql Database。 前面三个适用于存储较少的数据,而
Web Sql Database适用于存储大型的,复杂的数据,我习惯把前面的三个称之为小存储。
localStorage详解
localStorage /sessionStorage都有相同的Api 如
①localStorage.length 获得storage中的个数
②localStorage .key(n) 获得storage中第n个键值对的键
③localStorage.key = value
④localStorage.setItem(key, value) 添加
⑤localStorage.getItem(key)获取
⑥localStorage.removeItem(key)移除
⑦localStorage.clear()清除
demo1,生存周期
document.cookie = "zhangsan"; localStorage.setItem("name","lisi"); sessionStorage.setItem("name","wangwu"); 在注释上面的三句话之后 alert(document.cookie);//浏览器关闭后没有 alert(localStorage.getItem("name"));//浏览器关闭后仍然存在 alert(sessionStorage.getItem("name"));//浏览器关闭后没有
demo2,账号密码的保存
window.onload = function() { var names = document.getElementsByName("names")[0], pass = document.getElementsByName("pass")[0], box = document.getElementsByName("box")[0]; names.value = localStorage.getItem("names")?localStorage.getItem("names"):""; pass.value = localStorage.getItem("pass")?localStorage.getItem("pass"):""; box.checked = names.value&&pass.value; box.onclick = function() { if (box.checked) { localStorage.setItem("names", names.value); localStorage.setItem("pass", pass.value); box.checked = true; } else { localStorage.removeItem("names"); localStorage.removeItem("pass"); } } }用户名:<input type="text" name="names"> <br/>
密码: <input type="password" name="pass"> <br/>
是否保存:<input type="checkbox" name="box">
demo3,刷新页面后之前写的数据仍然存在window.onload=function () { var title=document.getElementsByName("title")[0]; var con=document.getElementsByName("con")[0]; var login=document.getElementById("login"); if(sessionStorage.title||sessionStorage.con){ title.value=sessionStorage.title; con.value=sessionStorage.con; } login.onclick=function () { sessionStorage.title=title.value; sessionStorage.con=con.value; } }标题:<input type="text" name="title"><br/>
内容:<textarea rows=5 cols=15 name="con"></textarea><br/><a href="test.php" id="login">登陆</a>
本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号