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

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

LocalStorageはブール値を保存します

今日、ブール値データを保存するために localstorage を使用したところ、ページにデータを表示する方法に問題があることがわかりました。

その後、ローカルストレージに保存されたブールデータが文字列に変換され、この問題が発生したことがわかりました。

したがって、「true」=true、「false」==false、「true」==false は両方とも false として表示されます。

ローカルストレージを厳密に使用しないことの落とし穴

新しいバージョンをリリースした後、ごく少数の「古い」ユーザーが WeChat ブラウザで当社 Web サイトのホームページを開けないことが判明しました。オンラインファイルプロキシの後

変更した後、ようやく問題が見つかりました。

問題コードスニペット:

ローカルストレージの getItem("物") の場合
    var things = localstorage.getItem("things");
    物を使う
    // 一度使用したらキャッシュを削除します。localstorage.removeItem('things');
}それ以外{
    新しいデータを使用します。
}

このコードは一見問題ないように見えるかもしれませんが、隠れた危険が潜んでいます。旧バージョンでは、localstorage に保存される内容は次のようになります。

{
    名前:'px',
    年齢:'25'
}

ただし、新しいバージョンでは、需要の問題により、このキャッシュの値は次の構造に変更されました。

{
    ユーザー名:'px',
    年齢:'25'
}

これにより、use 関数を使用して処理するときにエラーが発生し、後続の removeItem が実行されなくなるため、コード内でキャッシュされたデータがクリアされず、use 関数は常に古いデータをレンダリングに使用するため、エラーが発生し、新しいデータが使用できなくなります。

改善すべき点が2つあります

* キャッシュにバージョン番号を追加する * 変数を使用してキャッシュを読み込んだ後、すぐにキャッシュをクリアする

最適化されたコードは次のとおりです。

//まずキャッシュのバージョン番号を決定します if (localstorage.getItem ("version") == curVersion) {
    localstorage.getItem("things") の場合
        var things = localstorage.getItem("things");
        //すぐにクリアします localstorage.removeItem('things');
        物を使う
    }それ以外{
        使用(新しいデータ);
    }
}それ以外{
    localstorage.removeItem('物');
    使用(新しいデータ);
}

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

以下もご興味があるかもしれません:
  • ローカルストレージの使用に関する詳細な説明
  • JavaScriptはlocalStorageを使用してデータを保存します
  • Vue で localStorage を使用してデータを保存する方法

<<:  CentOS 8/RHEL 8 に Cockpit をインストールして使用する方法

>>:  Bツリーの特性の紹介

推薦する

mysql5.7 の新しい json フィールド タイプの使用例の分析

この記事では、MySQL 5.7 で追加された json フィールド タイプの使用方法を例を使って説...

CSSはボックスコンテナ(div)の高さを常に100%に設定します。

序文ブラウザをどのようにズームしても、ボックス コンテナーの高さを常に 100% に保つ必要がある場...

nacos が mysql に接続できない場合の解決策

理由nacos の pom が依存する mysql バージョンが、mysql バージョンと一致してい...

docker-maven-pluginはイメージをパッケージ化し、プライベートウェアハウスにアップロードします。

目次1. docker-maven-pluginの紹介2. 環境とソフトウェアの準備3. デモ例3....

MySQL の自動増分 ID に関するいくつかの小さな問題の要約

以下の質問はすべて InnoDB ストレージ エンジンに基づいています。 1. 最も大きな ID を...

dockerでビルドしたnacos1.3.0の実装

1. nacosデータベースを再開します。データベース名nacos_configユーザー名とパスワー...

nginxリバースプロキシのマルチポートマッピングの実装

コードの説明1.1 http:www.baidu.test.com のデフォルトは 80 で、リバー...

Taobao ストアでズームインする効果は、スライドショーを使用する原理に似ています。

今日は、スライドを使用する原理に似た、Taobao のフロントエンドのマウス ズーム効果に慣れました...

Prometheusコンテナのデプロイメントのための実用的なソリューション

環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...

Vuexの補助関数の使い方

目次マップ状態マップゲッターマップミューテーションマップアクション複数のモジュールマップ状態 ...

js は axios 制限リクエスト キューを実装します

目次背景は次のとおりです。何が起こるでしょうか?背景は次のとおりです。実際の開発では、ネットワークの...

CSS により、子コンテナが親要素を超えます (子コンテナは親コンテナ内で浮動します)

序文場合によっては、次の図のような浮動効果の要件が必要になります。 成し遂げる標準的な通常の状況では...

JS の FileReader を介して .txt ファイルの内容を取得する方法

目次JSはFileReaderを通じて.txtファイルの内容を取得します。 .txtファイルの読み取...

JavaScript で支払いの 10 秒カウントダウンを実現

この記事では、支払いの10秒カウントダウンを実現するためのJavaScriptの具体的なコードを参考...

Centos7 での mysql 8.0.15 のインストールと設定

この記事では、参考までにMySQL 8.0.15のインストールと設定のグラフィックチュートリアルを紹...