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>