简单存储
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>