HTML5中的本地存储及其相关例子

简单存储

$HTML5$ 提供了四种在客户端存储数据的新方法，即localStorage 、sessionStorage、globalStorage、WebSql Database。 前面三个适用于存储较少的数据,而
Web Sql Database适用于存储大型的，复杂的数据，我习惯把前面的三个称之为小存储。

简单储存和cookie的区别

简单储存	cookie
存储量大，可以达到5M	存储量小，最多4KB或许者20个key/value对
安全性高：节约带宽，缩短了请求响应时间	安全性低：向后台每发送一个http请求都会出现在http的头部
不需要指定作用域	需要指定作用域，不可以跨域调用
为了在本地“存储”数据而生	与服务器进行交互，作为HTTP规范的一部分而存在

简单存储之间的区别

localStorage	sessionStorage	globalSession
没有时间限制的存储除非主动删除	每个窗口的值都是独立的，它的数据会因窗口的关闭而丢失，不同窗口间的sessionStorage是不可以共享的	和sessionStorage一样，域中任何一个页面存储的信息都能被所有的页面共享。目前只有FF支持，且只支持当前域下的globalStorage存储。

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>