什么是localStorage、sessionStorage
在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)两疚，localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中l(wèi)ocalStorage會有所不同含滴。
localStorage的優(yōu)勢與局限
- localStorage的優(yōu)勢
1诱渤、localStorage拓展了cookie的4K限制
2、localStorage會可以將第一次請求的數(shù)據(jù)直接存儲到本地谈况，這個相當于一個5M大小的針對于前端頁面的數(shù)據(jù)庫勺美，相比于cookie可以節(jié)約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的 - localStorage的局限
1碑韵、瀏覽器的大小不統(tǒng)一赡茸，并且在IE8以上的IE版本才支持localStorage這個屬性
2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型祝闻，這個在對我們?nèi)粘１容^常見的JSON對象類型需要一些轉(zhuǎn)換
3占卧、localStorage在瀏覽器的隱私模式下面是不可讀取的
4、localStorage本質(zhì)上是對字符串的讀取联喘，如果存儲內(nèi)容多的話會消耗內(nèi)存空間华蜒，會導致頁面變卡
5、localStorage不能被爬蟲抓取到
6豁遭、localStorage與sessionStorage的唯一一點區(qū)別
就是localStorage屬于永久性存儲友多，而sessionStorage屬于當會話結(jié)束的時候，sessionStorage中的鍵值對會被清空
localStorage的使用
-
localStorage的瀏覽器支持情況：
image.png
如果是使用IE瀏覽器的話堤框，可以要UserData來作為存儲
首先在使用localStorage的時候，我們需要判斷瀏覽器是否支持localStorage這個屬性
if(纵柿！window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
//主邏輯業(yè)務
}
localStorage的寫入蜈抓，localStorage的寫入有三種方法：
if(！window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//寫入a字段
storage["a"]=1;
//寫入b字段
storage.a=1;
//寫入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
運行后的結(jié)果：
image.png
localStorage的使用也是遵循同源策略的昂儒，所以不同的網(wǎng)站直接是不能共用相同的localStorage
最后在控制臺上面打印出來的結(jié)果是:
image.png
（localStorage只支持string類型的存儲）
- localStorage的讀裙凳埂：
if(!window.localStorage){
alert("瀏覽器支持localstorage");
}else{
var storage=window.localStorage;
//寫入a字段
storage["a"]=1;
//寫入b字段
storage.a=1;
//寫入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
//第一種方法讀取
var a=storage.a;
console.log(a);
//第二種方法讀取
var b=storage["b"];
console.log(b);
//第三種方法讀取
var c=storage.getItem("c");
console.log(c);
}
- localStorage的寫入
if(!window.localStorage){
alert("瀏覽器支持localstorage");
}else{
var storage=window.localStorage;
//寫入a字段
storage["a"]=1;
//寫入b字段
storage.b=1;
//寫入c字段
storage.setItem("c",3);
console.log(storage.a);
// console.log(typeof storage["a"]);
// console.log(typeof storage["b"]);
// console.log(typeof storage["c"]);
/*分割線*/
storage.a=4;
console.log(storage.a);
}
- localStorage的刪除
1、localStorage所有內(nèi)容清除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
2渊跋、將localStorage中的某個鍵值對刪除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
3腊嗡、localStorage的鍵獲取
//使用key()方法着倾，向其中出入索引即可獲取對應的鍵
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
localStorage其他注意事項
一般我們會將JSON存入localStorage中，但是在localStorage會自動將localStorage轉(zhuǎn)換成為字符串形式
這個時候我們可以使用JSON.stringify()這個方法燕少，來將JSON轉(zhuǎn)換成為JSON字符串
if(!window.localStorage){
alert("瀏覽器支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
讀取之后要將JSON字符串轉(zhuǎn)換成為JSON對象卡者，使用JSON.parse()方法
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//將JSON字符串轉(zhuǎn)換成為JSON對象輸出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
//打印出來是Object對象，其他類型讀取出來也要進行轉(zhuǎn)換
