Vue storage contains a solution for Boolean values

Vue stores storage with Boolean values

I encountered a problem today. I needed to store the true and false values ​​returned by the background in storage, and then use the stored values ​​for logical judgment. However, the judgments were always wrong. After checking the information, I found

When storing data in localstorage, the stored boolean values ​​will become strings instead of the boolean values ​​that were initially stored.

All turned into strings

So how to solve it?

1: A conversion is performed on the front end

if (localStorage.getItem('boolean') == 'true') {
		// Reassign the new value 'Boolean value' = true
}

Or when storing, don't use boolean values ​​to store, use numbers or other values ​​instead, and then make the judgment.

// The value returned by the background is true
if (true) {
	localStorage.setItem('Boolean', 1)
}else {
	localStorage.setItem('boolean', 2)
}
// When needed if (localStorage.getItem('Boolean value') == 1) {
	// Handle the event }else {
	// Handle the event}

A pitfall of storing Boolean values ​​in localstorage

Problem Description

I recently used localstorage to store some shared variables at work, but encountered many problems when storing Boolean values;

In general, access is as follows:

localstorage.setItem('key', value);//save localstorage.getItem('key');//get

However, when storing Boolean data, since the Boolean data stored in localstorage is converted into strings, "true"=true and "false"==false, "true"==false are all displayed as false, resulting in many attempts without finding the problem;

Final solution

When localstorage or sessionstorage stores Boolean data, the data obtained becomes the string 'true' 'false'. It is recommended to set the value to 0 or 1 when storing this type of data, and use Number (localstorage.getItem ('key')) when obtaining the value, and then perform subsequent judgment operations;

The specific code is as follows:

Stored value:

if (this.isChecked) {
      //0: checked
      localStorage.setItem("checked",0);
} else {
       //1: not checked
       localStorage.setItem("checked",1);
}

Value:

getFlag:function(){
    var flag = Number (localStorage.getItem ('checked'));
    if(flag==0){
         this.flag=true;
     }else if(flag==1){
          this.flag=false;
     }
}

Summarize:

Both localStorage and sessionStorage can only store string objects, but cannot directly store arrays or objects commonly used in JS;

You can use the parse and stringify methods provided by the JSON object to convert other data types into strings and then store them in storage.

The code is as follows:

Stored value:

localStorage.setItem("flag_data",JSON.stringify(flagData));

Value:

var flag_data = JSON.parse(localStorage.getItem("flag_data"));

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.