Vueストレージにはブール値のソリューションが含まれています

Vueはブール値でストレージを保存します

今日、問題に遭遇しました。バックグラウンドから返された真偽の値をストレージに保存し、保存された値を使用して論理的な判断を行う必要がありました。しかし、判断は常に間違っていました。情報を確認した後、私は発見しました

ローカルストレージにデータを保存する場合、保存されたブール値は、最初に保存されたブール値ではなく、文字列になります。

すべては文字列に変換されました

それで、どうやって解決するのでしょうか?

1: フロントエンドで変換が実行される

localStorage.getItem('boolean') == 'true'の場合{
		// 新しい値を再割り当てします 'ブール値' = true
}

あるいは保存するときにブール値を使って保存せず、代わりに数値や他の値を使ってから判断してください。

// 背景から返される値は true です
（真）の場合{
	localStorage.setItem('ブール値', 1)
}それ以外 {
	ローカルストレージ.setItem('boolean', 2)
}
// 必要な場合 if (localStorage.getItem('Boolean value') == 1) {
	// イベントを処理する }else {
	// イベントを処理する}

ローカルストレージにブール値を保存する際の落とし穴

問題の説明

最近、職場でいくつかの共有変数を保存するために localstorage を使用しましたが、ブール値を保存するときに多くの問題が発生しました。

一般的なアクセス方法は次のとおりです。

localstorage.setItem('key', value);//保存 localstorage.getItem('key');//取得

しかし、ブールデータを保存する場合、ローカルストレージに保存されたブールデータが文字列に変換されるため、「true」=true および「false」==false、「true」==false はすべて false として表示され、何度も試行しても問題が見つかりません。

最終解決策

localstorage や sessionstorage にブール型データを格納する場合、取得されるデータは文字列 'true' 'false' になります。このタイプのデータを格納する場合は値を 0 または 1 に設定し、値を取得する場合は Number (localstorage.getItem('key')) を使用して、後続の判定操作を実行することをお勧めします。

具体的なコードは次のとおりです。

保存された値:

チェックされている場合
      //0: チェック済み
      localStorage.setItem("チェック済み",0);
} それ以外 {
       //1: チェックなし
       localStorage.setItem("チェック済み",1);
}

価値：

getFlag:関数(){
    var flag = Number (localStorage.getItem ('checked'));
    if(フラグ==0){
         this.flag を true に設定します。
     }そうでない場合(フラグ==1){
          this.flag=false;
     }
}

要約:

localStorage と sessionStorage はどちらも文字列オブジェクトのみを保存でき、JS でよく使用される配列やオブジェクトを直接保存することはできません。

JSON オブジェクトが提供する parse メソッドと stringify メソッドを使用して、他のデータ型を文字列に変換し、ストレージに保存することができます。

コードは次のとおりです。

保存された値:

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

価値：

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

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。