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; // 执行同步数据处理...}
本篇文章讲解了关于html5 localstorage and sessionstorage 之间的区别，更多相关内容请关注。
相关推荐：
关于php zip文件内容比较类的讲解
如何通过php 获取/设置用户访问页面语言类
通过php 计算两个文件之间的相对路径方法
以上就是关于html5 localstorage and sessionstorage 之间的区别的详细内容。