LocalStorage
含義
- 在HTML5中,這個(gè)特性主要是用來(lái)作為本地存儲(chǔ)來(lái)使用的懦傍。在localStorage下一般瀏覽器支持的是5M大小阎姥，這個(gè)在不同的瀏覽器中l(wèi)ocalStorage會(huì)有所不同闭专。
- localStorage只支持String類型的存儲(chǔ)淑廊。
判斷瀏覽器是否支持localStorage屬性
if(!window.localStorage){
alert("瀏覽器支持localstorage");
return false;
} else {
// some code here...
}
Localstorage的方法
1.添加新的數(shù)據(jù)到Localstorage中存儲(chǔ)
localStorage.setItem(keyName, keyValue);
if(逗余！window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//寫(xiě)入a字段
storage["a"]=1;
//寫(xiě)入b字段
storage.a=1;
//寫(xiě)入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
2.返回指定keyName的Localstorage中存儲(chǔ)的值
localStorage.getItem(keyName);
3.從Localstorage中移除指定keyName的數(shù)據(jù)項(xiàng)
localStorage.removeItem(keyName);
4.清除所有的本地Localstorage存儲(chǔ)
localStorage.clear();
localStorage的優(yōu)劣
1.優(yōu)勢(shì)
- localStorage拓展了cookie的4K限制，為前端數(shù)據(jù)存儲(chǔ)提供了新的思路
- localStorage會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地季惩，這個(gè)相當(dāng)于一個(gè)5M大小的針對(duì)于前端頁(yè)面的數(shù)據(jù)庫(kù)录粱，相比于cookie可以節(jié)約帶寬
2.劣勢(shì)
- 不同瀏覽器的存儲(chǔ)大小不統(tǒng)一，并且在IE8以上的IE版本才支持localStorage這個(gè)屬性
- localStorage的值類型限定為String類型画拾，許多使用場(chǎng)景下會(huì)有限制
- localStorage在瀏覽器的隱私模式下面是不可讀取的
- localStorage本質(zhì)上是對(duì)字符串的讀取啥繁，如果存儲(chǔ)內(nèi)容多的話會(huì)消耗內(nèi)存空間，會(huì)導(dǎo)致頁(yè)面變卡
