localStorage 与 sessionStorage 区别
localStorage没有过期时间，只要不clear或remove，数据会一直保存。
sessionStorage 针对一个session进行数据存储，生命周期与session相同，当用户关闭浏览器后，数据将被删除。
特点：
1. localStorage 默认支持的容量为一个站 5M ，当调用set IT em超过上限时，会触发 quota ExceededError 异常。当然有些浏览器支持修改容量上限，但为了兼容其他浏览器，最好按5M的容量来使用。
2. localStorage 是以 key-value 形式保存数据的，key和value只能是字符串格式。因此数字1保存后，会转换成字符串1。
3. localStorage 的写入与读取写法有以下 几种 ：
localStorage.n am e = & # 39;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.remov ei tem = null; localStorage.clear = null;
因此，建议使用 setItem(), getItem(), removeItem(), clear() 来实现写入，读取，删除，清空。
4. 如果要保存非字符串的内容，建议使用JSON来处理。写入数据时用 JSON.stringify 转成字符串，读取数据时用 JSON.parse 把字符串转为之前的格式。
例子1：
<!DOCTY PE HTML P ub LIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://HdhCmsTestw3. org /TR/html4/loose.dtd">
<html>
<head>
< ;m eta http-equiv="content -t ype" 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="save BT n" 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://HdhCmsTestw3.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 stat us = {}
status.key = event.key;
status.oldValue = event.oldValue;
status.newValue = event.newValue;
status.url = event.url;
status.storage = event.storageArea;
// 执行同步数据处理 .. .
}本篇 文章 讲解 了关于HTML5 localStorage and sessionStorage 之间的区别，更多相关内容请关注。
相关推荐：
关于php zip文件 内容比较类的讲解
如何通过php 获取/设置用户访问页面语言类
通过php 计算两个文件之间的相对路径方法
以上就是关于HTML5 localStorage and sessionStorage 之间的区别的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 关于HTML5 localStorage and sessionStorage 之间的区别 全部内容，希望文章能够帮你解决 关于HTML5 localStorage and sessionStorage 之间的区别 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于关于HTML5 localStorage and sessionStorage 之间的区别的详细内容...