HTML5的WEB存储 loacalStorage和sessionStorage，一个比cookie更好的存储方式

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 onclick="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 onclick="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 onclick="save()">保存信息</button>
			</div>
			<div id="check">
				<label>网站名key</label><input type="text" id="check_sitename"/>
				<br />
				<button onclick="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>

HTML5的WEB存储 loacalStorage和sessionStorage，一个比cookie更好的存储方式

猜你喜欢