html5中数据存储的例子,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.οnlοad=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.οnclick=function () {

sessionStorage.title=title.value;

sessionStorage.con=con.value;

}

}

HTML：

标题：

内容：

登陆