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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue プロジェクトで localStorage または sessionStorage の変更を監視する方法
  • localStorage ストレージ情報に基づく Vue のコード例
  • Vueはパンくずリストを実装するためにローカルストレージを使用する
  • VueはlocalStorageローカルキャッシュを使用して、検証コードをクリアせずに更新する機能を実装します。
  • Vue で localStorage をレスポンシブにする方法 (思考実験)
  • Vue セッションストレージに基づいて検索ボックスの検索コンテンツを保持する

<<:  Bツリー挿入プロセスの概要

>>:  KVM 仮想マシンのオンライン ホット マイグレーションを実装する方法 (画像とテキスト)

推薦する

小さなプログラムが天井に張り付いてしまう問題を完璧に解決するためにposition:stickyを使用する方法

最近、あるプロジェクトのクライアントが、上部に 2 つのタブ メニューを配置することを要求しました。...

Linux CentOS MySQL データベースのインストールと設定のチュートリアル

MySQLデータベースのインストールに関するメモ、みんなで共有a) MySQL ソースインストールパ...

MySQL 8.0 の新機能 - 管理ポートの使用の概要

目次序文接続管理追加の接続管理ポート要約する序文皆さんの多くは、次のようなエラー メッセージに遭遇し...

CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...

Redhat 7.3 に MySQL 8.0.22 をインストールするための詳細なチュートリアル (バイナリ インストール)

目次1. MySQLインストールパッケージをダウンロードする2. MySQLのアンインストール手順3...

JSは円形のプログレスバーのドラッグとスライドを実装します

この記事の例では、円形のプログレスバーのドラッグアンドスライドを実現するための具体的なJSコードを紹...

エンタープライズプロダクション MySQL 最適化入門

Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...

MYSQLでリモートアクセス権限を有効にする方法

1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...

Vue コンポーネントはどのように解析され、レンダリングされるのでしょうか?

序文この記事では、Vue コンポーネントがどのように解析され、レンダリングされるかを説明します。 V...

WeChatアプレットがジグソーパズルゲームを実装

この記事では、WeChatアプレットでジグソーパズルゲームを実装するための具体的なコードを参考までに...

入力テキスト ボックスと画像検証コードの位置合わせの問題 (画像は常に入力より 1 つ上になります)

Web ページ制作では、input と img が同じ行に配置されることが多く、img タグが常に ...

win10環境でDockerをインストールする実装

1. Docker公式サイトにアクセスするまず、Dockerの公式ウェブサイトにアクセスして、最新の...

表に斜めヘッダー効果を出す5つの方法

誰もがテーブルをよく知っているはずです。コード内でよく見かけます。テーブルにスラッシュ ヘッダーを追...

.htaccess を使用して特定の IP からの Web サイトへのアクセスを禁止する方法

序文コストを考慮して、ほとんどのウェブマスターは、多数の小規模なウェブサイト用にサーバーを個別に購入...

MIME エンコーディングの概要 (オンライン情報と実際の経験から統合)

1. MIME: 多目的インターネットメール拡張インペリアル カレッジ オブ コンピュータ オンラ...