細(xì)數(shù)localStorage的用法及使用注意事項(xiàng)

更新時(shí)間：2022年04月06日 11:19:25 作者：五筆小哥

這篇文章主要介紹了細(xì)數(shù)localStorage的用法及使用注意事項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

localStorage 介紹

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

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

localStorage 使用

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如何使用

localStorage 獲取

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

注意：localStorage的設(shè)置和讀取方式，官方推薦使用 setItem / getItem；

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;