細數(shù)localStorage的用法及使用注意事項

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

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

localStorage 介紹

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

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

localStorage 使用

localStorage的瀏覽器支持情況

localStorage用法

localStorage代碼中的使用

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

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

localStorage 設(shè)置語法

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 清除當前域名下所有內(nèi)容

localStorage.clear();

localStorage中存入 JSON 對象，需先轉(zhuǎn)換成 JSON 字符串，再寫入，在讀取時再轉(zhuǎn)換成 JSON 對象：（否則會報錯）

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