localStorage的用法及使用注意事項(xiàng)是什么

這篇文章主要講解了“l(fā)ocalStorage的用法及使用注意事項(xiàng)是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“l(fā)ocalStorage的用法及使用注意事項(xiàng)是什么”吧！

localStorage 介紹

在HTML5中，為了解決cookie存儲(chǔ)空間不足的問(wèn)題(cookie中每條cookie的存儲(chǔ)空間為4k)，增加了一個(gè) localStorage，主要是用來(lái)作為本地存儲(chǔ)的；

localStorage 中一般瀏覽器支持的容量大小是5M，針對(duì)不同的瀏覽器，localStorage容量大小會(huì)有所不同。

localStorage 使用

localStorage的瀏覽器支持情況 

localStorage代碼中的使用

在項(xiàng)目中，使用localStorage首先需要做的先判斷瀏覽器是否支持;

if(!window.localStorage){
 	alert("瀏覽器不支持localstorage");
}else{
    //主邏輯業(yè)務(wù)
    console.log('Hello world!');
}

localStorage 設(shè)置語(yǔ)法

if(!window.localStorage){
    alert("瀏覽器支持localstorage");
}else{
    var storage=window.localStorage;
    //第一種設(shè)置方式：
    storage["a"]=1;
    //第二種設(shè)置方式：
    storage.b=1;
    //第三種設(shè)置方式：
    storage.setItem("c",3);
    
    console.log(typeof storage["a"]);  //打印出結(jié)果：String
    console.log(typeof storage["b"]);  //打印出結(jié)果：String
    console.log(typeof storage["c"]);  //打印出結(jié)果：String
}

在瀏覽器中查看結(jié)果：

localStorage 獲取

	//第一種方法讀取
	var a=storage.a;
	console.log(a);
	
	//第二種方法讀取
	var b=storage["b"];
	console.log(b);
	
	//第三種方法讀取
	var c=storage.getItem("c");
	console.log(c);

localStorage 修改

var getVal = localStorage.getItem('myStorage');
if( getVal  != null ){
	localStorage.setItem('myStorage','setOk');
	console.log('修改成功');
}else{
	console.log('未找到myStorage, getVal返回值為 null');
}

localStorage刪除

var getVal = localStorage.getItem('myStorage');
if( getVal  != null ){
	localStorage.removeItem('myStorage');
	console.log('刪除成功');
}else{
	console.log('未找到myStorage，getVal返回值為 null');
}

localStorage 清除當(dāng)前域名下所有內(nèi)容

localStorage.clear();

localStorage中存入 JSON 對(duì)象，需先轉(zhuǎn)換成 JSON 字符串，再寫入，在讀取時(shí)再轉(zhuǎn)換成 JSON 對(duì)象：（否則會(huì)報(bào)錯(cuò)）

var storage=window.localStorage;
var data={
     name:'zhangSan',
     sex:'1'
 };
 //將對(duì)象轉(zhuǎn)換為 String ,如果不轉(zhuǎn)，在存入localStorage后，讀取出來(lái)轉(zhuǎn)換 json對(duì)象會(huì)報(bào)錯(cuò)
 var setData=JSON.stringify(data); 
 storage.setItem("data",setData);
 
 //將JSON字符串轉(zhuǎn)換成為JSON對(duì)象輸出
 var jsonString=storage.getItem("data");
 console.log(typeof jsonString); //打印出 String;
 var jsonObj=JSON.parse(jsonString);
 console.log(typeof jsonObj); //打印出 Object;

localStorage 注意事項(xiàng)

瀏覽器的大小不統(tǒng)一，并且在IE8以上的IE版本才支持localStorage這個(gè)屬性

目前所有的瀏覽器中都會(huì)把localStorage的值類型限定為string類型，這個(gè)在對(duì)我們?nèi)粘１容^常見(jiàn)的JSON對(duì)象類型需要一些轉(zhuǎn)換

localStorage在瀏覽器的隱私模式下面是不可讀取的

localStorage本質(zhì)上是對(duì)字符串的讀取，如果存儲(chǔ)內(nèi)容多的話會(huì)消耗內(nèi)存空間，會(huì)導(dǎo)致頁(yè)面變卡

localStorage不能被爬蟲抓取到 

感謝各位的閱讀，以上就是“l(fā)ocalStorage的用法及使用注意事項(xiàng)是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)localStorage的用法及使用注意事項(xiàng)是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！