html5 提供两种 web 存储方法,localStorage 与 sessionStorage
localStorage 与 sessionStorage 区别
localStorage 没有过期时间,只要不 clear 或 remove,数据会一直保存.
sessionStorage 针对一个 session 进行数据存储,生命周期与 session 相同,当用户关闭浏览器后,数据将被删除.
特点:
1.localStorage 默认支持的容量为一个站 5M,当调用 setItem 超过上限时,会触发 QuotaExceededError 异常.当然有些浏览器支持修改容量上限,但为了兼容其他浏览器,最好按 5M 的容量来使用.
2.localStorage 是以 key-value 形式保存数据的,key 和 value 只能是字符串格式.因此数字 1 保存后,会转换成字符串 1.
3.localStorage 的写入与读取写法有以下几种:
localStorage.name = 'fdipzone';
name = localStorage.name;
localStorage['name'] = 'fdipzone';
name = localStorage['name'];
localStorage.setItem('name', 'fdipzone');
name = localStorage.getItem('name');
localStorage[key] = value 写法主流浏览器都支持,官方并没有说明那一种写法是标准.但如果执行以下的代码就使 localStorage 失效.
localStorage.setItem = null;
localStorage.getItem = null;
localStorage.removeItem = null;
localStorage.clear = null;
因此,建议使用 setItem(), getItem(), removeItem(), clear() 来实现写入,读取,删除,清空.
4. 如果要保存非字符串的内容,建议使用 JSON 来处理.写入数据时用 JSON.stringify 转成字符串,读取数据时用 JSON.parse 把字符串转为之前的格式.
例子 1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
Local Storage and Session Storage
</title>
</head>
<body>
<p>
姓名:
<input type="text" name="name" id="name">
</p>
<p>
性别:
<input type="radio" name="gender" id="gender1" value="1">
男
<input type="radio" name="gender" id="gender2" value="2">
女
</p>
<p>
<input type="button" id="saveBtn" value="save">
<input type="button" id="getBtn" value="get">
<input type="button" id="removeBtn" value="remove name">
<input type="button" id="clearBtn" value="clear">
</p>
<script type="text/javascript">
var oStorage = window.localStorage;
function $(id) {
return document.getElementById(id);
}
// 保存数据
$('saveBtn').onclick = function() {
oStorage.setItem('name', $('name').value);
if ($('gender1').checked == true) {
oStorage.setItem('gender', 1);
} else if ($('gender2').checked == true) {
oStorage.setItem('gender', 2);
}
}
// 获取数据
$('getBtn').onclick = function() {
$('name').value = oStorage.getItem('name');
if (oStorage.getItem('gender') == 1) {
$('gender1').checked = true;
} else if (oStorage.getItem('gender') == 2) {
$('gender2').checked = true;
}
}
// 删除数据name
$('removeBtn').onclick = function() {
oStorage.removeItem('name');
}
// 清空数据
$('clearBtn').onclick = function() {
oStorage.clear();
}
</script>
</body>
</html>
例子 2:使用 JSON.stringify 和 JSON.parse 封装数据
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
Local Storage and Session Storage
</title>
</head>
<body>
<p>
姓名:
<input type="text" name="name" id="name">
</p>
<p>
性别:
<input type="radio" name="gender" id="gender1" value="1">
男
<input type="radio" name="gender" id="gender2" value="2">
女
</p>
<p>
<input type="button" id="saveBtn" value="save">
<input type="button" id="getBtn" value="get">
<input type="button" id="clearBtn" value="clear">
</p>
<script type="text/javascript">
var oStorage = window.localStorage;
function $(id) {
return document.getElementById(id);
}
// 保存数据
$('saveBtn').onclick = function() {
var name = $('name').value;
var gender;
if ($('gender1').checked == true) {
gender = 1;
} else if ($('gender2').checked == true) {
gender = 2;
}
var data = {};
data['name'] = name;
data['gender'] = gender;
oStorage.setItem('data', JSON.stringify(data));
}
// 获取数据
$('getBtn').onclick = function() {
var data = JSON.parse(oStorage.getItem('data'));
if (data) {
var name = data['name'];
var gender = data['gender'];
$('name').value = name;
if (gender == 1) {
$('gender1').checked = true;
} else if (gender == 2) {
$('gender2').checked = true;
}
}
}
// 清空数据
$('clearBtn').onclick = function() {
oStorage.clear();
}
</script>
</body>
</html>
监听 localStorage 的值,当发生变化时同步页面数据
当调用 setItem(), removeItem(), clear() 时,可以监听这些事件,方便不同的页面之间更新数据.
// 监听数据变化,当数据发生变化时,同步数据显示
window.onstorage = function(event) {
var status = {}
status.key = event.key;
status.oldValue = event.oldValue;
status.newValue = event.newValue;
status.url = event.url;
status.storage = event.storageArea;
// 执行同步数据处理...
}
页面数据同步例子:
来源: http://lib.csdn.net/article/html5/36558