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

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