localStorage屬于HTML5的新功能之一毅舆，它的作用和之前學(xué)的cookie相像衰粹，都可以存東西，那么他們之間有什么區(qū)別么踪危？今天查找了一些資料蔬浙，寫(xiě)一些自己收集的區(qū)別如下：
cookie的大小約4k，兼容性在ie6及以上 都兼容贞远，在瀏覽器和服務(wù)器間來(lái)回傳遞畴博，因此它得在服務(wù)器的環(huán)境下運(yùn)行，而且可以設(shè)定過(guò)期時(shí)間兴革，默認(rèn)的過(guò)期時(shí)間是session會(huì)話(huà)結(jié)束绎晃。
localStorage的大小約5M，兼容性在ie7及以上都兼容杂曲，有瀏覽器就可以，不需要在服務(wù)器的環(huán)境下運(yùn)行袁余， 會(huì)一直存在擎勘，除非手動(dòng)清除 。
接下來(lái)是兩者分別的使用颖榜。首先是localStorage的使用棚饵，它的使用方法有兩種煤裙，兩種都能實(shí)現(xiàn)寫(xiě)與讀的功能。手動(dòng)刪除的兩種在下面有詳細(xì)介紹噪漾，其中刪單個(gè)用getItem硼砰，刪除全部用clear。記住Item里面的第一個(gè)是字母是i大寫(xiě)欣硼。
如何查看 localStorage：按F12找到application（resource）點(diǎn)擊localStorage题翰，里面有需要查看的寫(xiě)入的東西。
第一種是常用寫(xiě)法：
<script>
//寫(xiě)
localStorage.a = 12;
//讀
alert(localStorage.a );
</script>
第二種是標(biāo)準(zhǔn)寫(xiě)法：
<script>
//寫(xiě)setItem
localStorage.setItem('b','today is a good day');
localStorage.setItem('c','i am happy to see you');
// localStorage.removeItem('c');//這個(gè)是指定刪除
//localStorage.clear();//這個(gè)是全部刪除诈胜，一般不用
//讀getItem
alert(localStorage.getItem('b'));
</script>
Cookie的使用方法：
寫(xiě)cookie: document.cookie='212';
讀cookie: alert(document.cookie);
expires:設(shè)置過(guò)期時(shí)間
ar oDate=new Date();
oDate.setDate(oDate.getDate()+3);
document.cookie='a=212;expires='+oDate;
path: /(根目錄) 默認(rèn)存在當(dāng)前目錄
document.cookie='b=212;path=/;expires='+oDate;
domain: 存域名（放一級(jí)域名）
document.cookie='a=212;domain=www.baidu.com;expires='+oDate;
Cookie的存豹障，取，刪
存cookie: function setCookie(name,value,iDay);
獲取cookie: getCookie(name)
刪除cookie： removeCookie(name)
function removeCookie(name){setCookie(name,'任意值',iDay);}
網(wǎng)頁(yè)換膚功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" id="link1" href="css/1.css" />
<body>
<input type="button" value="變黑" />
<input type="button" value="變紅" />
<input type="button" value="變藍(lán)" />
</body>
</html>
<script type="text/javascript" src="js/cookie.js" ></script>
<script>
var oLink=document.getElementById('link1');
var aBtn=document.getElementsByTagName('input');
var oBgName=getCookie('bgName');
if(oBgName){
oLink.href='css/'+oBgName+'.css';
}
for (var i=0;i<aBtn.length;i++) {
(function(index){
aBtn[index].onclick=function(){
var _index=index+1;
oLink.href='css/'+_index+'.css';
setCookie('bgName',_index,3);
};
})(i);
}
</script>
//調(diào)用的Cookie.js封裝
function setCookie(name,value,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';path=/;expires='+oDate;限時(shí)焦匈？
}else{
document.cookie=name+'='+value+';path=/;';
}
};
function getCookie(name){
var arr=document.cookie.split('; ');
for (var i=0;i<arr.length;i++) {
var arr2=arr[i].split('=');分開(kāi)字符串
name=value
//arr2[0]
if(arr2[0]==name){
return arr2[1];
}
}
return '';
}
function removeCookie(name){
setCookie(name,'任意值',-10);
}
1.css
body{
background-color: #000;
}
2.css
body{
background-color: #f00;
}
3.css
body{
background-color: blue;
}
