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

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

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ツリーの特性の紹介

推薦する

HTML チュートリアル: 順序なしリスト

<br />原文: http://andymao.com/andy/post/102.h...

JS ネイティブ 2048 ゲーム ソース コード共有 (インターネットの最新情報)

最近、アルゴリズムについて学んでいて、アルゴリズムで動く小さなゲームに出会いました。そのコードは次の...

1 つの記事で React における Redux の初期の使用を理解する

Redux はデータ状態管理プラグインです。React や Vue を使用してコンポーネント化された...

CentOS 7 で Docker のポート転送をファイアウォールと互換性のあるように設定する方法

CentOS 7 では、次のようなコマンドを使用してホスト ポートをコンテナー ポートにマッピングす...

MySQLでルートユーザーのパスワードを変更する方法

方法1: SET PASSWORDコマンドを使用する mysql> username@loca...

Ubuntu で nvidia グラフィック ドライバーをインストールする (簡単なインストール方法)

Ubuntu で nvidia グラフィック カード ドライバーをインストールします。同じ方法で ...

Nginx サーバーの https 設定方法の例

Linux: Linux バージョン 3.10.0-123.9.3.el7.x86_64 ngin...

自動同期テーブル構造のMySql開発

開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...

HTMLフォーム要素の詳しい解説(パート2)

HTML 入力属性値属性value 属性は、入力フィールドの初期値を指定します。 <フォーム...

Linux環境でのshadowsocks+polipoグローバルプロキシの設定

1. シャドウソックスをインストールするsudo apt-get install python-pi...

MySQLのスローログの開き方と保存形式の詳細な分析

開発プロジェクトでは、MySQL のスロークエリログを通じて効率の問題のある SQL を監視できます...

Reactにおけるキーの役割の詳細な説明

目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...

MySQLがクエリキャッシュをキャンセルした理由

MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...

Vueはタブルーティング切り替えコンポーネントのメソッド例を実装します

序文この記事では、vue に付属している vue-router.js ルーティングを使用してページン...

Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順

開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにし...