細數localStorage的用法及使用注意事項

2022-04-06 13:00:12

localStorage 介紹

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

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

localStorage 使用

localStorage的瀏覽器支援情況

localStorage程式碼中的使用

在專案中，使用localStorage首先需要做的先判斷瀏覽器是否支援;

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

localStorage 設定語法

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

在瀏覽器中檢視結果：

localStorage 獲取

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

注意：localStorage的設定和讀取方式，官方推薦使用 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 清除當前域名下所有內容

localStorage.clear();

localStorage中存入 JSON 物件，需先轉換成 JSON 字串，再寫入，在讀取時再轉換成 JSON 物件：（否則會報錯）

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