sessionStorage、localStorage和cookie之间的区别?
共同点:用于浏览器端存储的缓存数据
不同点:(1)、存储内容是否发送到服务器端。当设置了cookie后,数据会发送到服务器端,造成一定的宽带浪费;web storage会将数据保存到本地,不会造成资源浪费
(2)、数据存储大小不同。cookie数据不能超过4k;web storage数据存储可以达到5M;
(3)、存储周期不同;cookie只在设置了cookie过期时间之前有效,即使关闭浏览器和窗口;localstorage数据存储永久有效;sessionstorage仅在浏览器关闭之前有效;
(4)、作用域不同:cookie和localstorage在同源同窗口中都是共享的
3、webstorage相比cookie的优势
(1)、存储空间更大
(2)、存储内容不会发送到服务器,减少宽带资源的浪费
(3)、更多丰富易用的接口
(4)、独立的存储空间
localStorage实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function clickCounter()
{
if(typeof(localStorage)!=="undefined")
{
if(localStorage.clickcounter)
{
localStorage.clickcounter=Number(localStorage.clickcounter)+1;
}
else
{
localStorage.clickcounter=1;
}
document.getElementById("result").innerHTML="点击次数:"+localStorage.clickcounter;
}
else
{
document.getElementById("result").innerHTML="恁的浏览器不支持h5";
}
}
</script>
</head>
<body>
<div id="result"></div>
<button οnclick="clickCounter()">点我</button>
<p>点击按钮查看计数器的增加</p>
<p>关闭浏览器,重新打开该页面,计数器将继续计数(不是重置)</p>
</body>
</html>
sessionStorage实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function clickCounter2()
{
if(typeof(Storage)!=="undefined")
{
if(sessionStorage.clickcounter)
{
sessionStorage.clickcounter=Number(sessionStorage.clickcounter)+1;
}
else
{
sessionStorage.clickcounter=1;
}
document.getElementById("result").innerHTML="点击次数:"+sessionStorage.clickcounter;
}
}
</script>
</head>
<body>
<div id="result"></div>
<button οnclick="clickCounter2()">点我</button>
<p>浏览器关闭次数重置</p>
</body>
</html>
到这里你会发现localStorage和sessionStorage用法完全一样,接口一样,区别也就是存储的周期不同。
localStorage.setItem(key,value);保存数据
localSorage.getItem(key);读取数据
localStorage.removeItem(key)删除单个数据
localSorage.clear();删除所有数据
localSorage.key(index);得到某个索引的key
上面的例子太过简单,看下面复杂点的,这里用localStorage做例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box
{
border-style: dashed;
width: 300px;
height: 300px;
text-align: center;
}
#check
{
border: solid 2px yellowgreen;
}
</style>
</head>
<body>
<table>
<tr>
<td>key</td>
<td>url</td>
</tr>
</table>
<div id="box">
<div id="text">
<label>网站名key:</label>
<input type="text" id="sitename" /><br />
<label>网址:</label>
<input type="text" id="siteurl" /><br />
<button οnclick="save()">保存信息</button>
</div>
<div id="check">
<label>网站名key</label><input type="text" id="check_sitename"/>
<br />
<button οnclick="find()">查找</button>
</div>
<div id="result"></div>
</div>
<div id="list">
</div>
<script type="text/javascript">
loadAll();
function save()
{
var site=new Object;
site.name=document.getElementById("sitename").value;
site.url=document.getElementById("siteurl").value;
if(typeof(Storage)!=="undefined")
{
var str=JSON.stringify(site);
localStorage.setItem(site.name,str);
alert("添加成功");
}
else
{
document.write("恁的浏览器不支持html5");
}
}
function find()
{
var find_name=document.getElementById("check_sitename").value;
var find_url=localStorage.getItem(find_name);
var site2=JSON.parse(find_url);
var result_find=document.getElementById("result");
result_find.innerHTML="网站名:"+site2.name+"<br/>"+"网址:"+site2.url;
}
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>key</td><td>value</td></tr>";
for(var i=0;i<localStorage.length;i++){
var sitename = localStorage.key(i);
var siteurl = localStorage.getItem(sitename);
var site3=JSON.parse(siteurl);
result += "<tr><td>"+sitename+"</td><td>"+site3.url+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "数据为空……";
}
}
</script>
</body>
</html>