5分钟了解HTML5中的本地存储-职坐标

5分钟了解HTML5中的本地存储

沉沙 2018-07-16 来源：阅读 1469 评论 0

摘要：本篇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频道！

html5项目 html5+css3从入门到精通如何 html5css3教程

本文由 @沉沙发布于职坐标。未经许可，禁止转载。