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

简单存储

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

简单存储和cookie的区别.png

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() 清除

HTML：

用户名： 

 密码:  

 是否保存：

demo1，生命周期

JavaScript：

document.cookie = "zhangsan";
 localStorage.setItem("name","lisi");
 sessionStorage.setItem("name","wangwu");
 在注释上面的三句话之后
 alert(document.cookie);//浏览器关闭后没有
 alert(localStorage.getItem("name"));//浏览器关闭后仍然存在
 alert(sessionStorage.getItem("name"));//浏览器关闭后没有

demo2，账号密码的保存

JavaScript ：

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");
 }
 }
 }
 

demo3,刷新页面后之前写的数据仍然存在

JavaScript：

 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;
 }
}
 
 

HTML：

标题：

 内容：

 登陆