回転:localStorageはまだ使えます

13698 ワード
アドレス:https://iammapping.com/the-other-ways-to-use-localstorage/
 
localStorageはまだ使えます
HTML 5におけるWeb Storageの出現は,主としてCookieをローカルストレージとして使用する不足を補うためである.Cookieが格納するデータ量は非常に小さく、データは要求ヘッダに自動的に持ち込まれますが、サーバ側はこれらのデータに関心を持っていない可能性があるため、帯域幅の浪費をもたらす可能性があります.
Web Storageには、localStorageとsessionStorageの2つのストレージオブジェクトがあります.
sessionStorageに格納されているデータは、今回のセッションでのみ使用可能であり、セッションが終了すると自動的に失効し、現在のウィンドウでのみデータが有効になり、同じソースの下で新しいウィンドウでも他のウィンドウがsessionStorageに基づいて格納されているデータにアクセスできません.これらの特性のため、sessionStorageの使用シーンが少なくなります.
localStorageは永続的に保存でき、同源下のデータマルチウィンドウも共有できます.美しく見えますが、localStorageにもショートボードがあり、ほとんどのブラウザでは5 Mのサイズ制限があります.しかし、これはlocalStorageを使うのに十分な障害ではありません.Cookieは4 Kの大きさで、千倍以上増えていることを知って、楽しんでください.
localStorageの基本的な使用
この内容を話す文章はネット上に多すぎて、今から言うと少し古いです.ここではこれ以上紹介しないで、はっきりしない読者はここを見ることができます.
注意しなければならないことが2つあります.setItemの場合、サイズ制限に達する可能性があります.エラーキャプチャ1を追加したほうがいいです.
try {  
  localStorage.setItem(key, value); } catch(e) { if (isQuotaExceeded(e)) { // Storage full, maybe notify user or do some clean-up } } function isQuotaExceeded(e) { var quotaExceeded = false; if (e) { if (e.code) { switch (e.code) { case 22: quotaExceeded = true; break; case 1014: // Firefox if (e.name === 'NS_ERROR_DOM_QUOTA_REACHED') { quotaExceeded = true; } break; } } else if (e.number === -2147024882) { // Internet Explorer 8 quotaExceeded = true; } } return quotaExceeded; }

また、ストレージ容量が満タンになると、getItemのパフォーマンスが急激に低下します.
次にlocalStorageの脳の穴が開いている使い方を見てみましょう.
静的ファイルのキャッシュ
HTTPプロトコルはもともとキャッシュファイルをサポートしているのではないでしょうか(前に「WebキャッシュのHTTPガイド」という記事を書いたことがありますが)、なぜlocalStorageを使用してキャッシュするのですか?プログラマブル化のために、通俗的には運命を自分の手に握ることだ.
HTTPプロトコルのキャッシュは、ユーザーブラウザでキャッシュをクリアまたは無効にしたり、Webサーバで期限切れを設定したり、キャッシュしないことができます.フロントエンドエンジニアの場合、これはブラックボックスのようなもので、ファイルがキャッシュにアクセスするかリモートにアクセスするかを決定するには力不足です.
localStorageを使用してファイルキャッシュを制御する方法は2つあります.
  • Loaderを使用して静的ファイル
    • をロードする
  • サーバ側による静的ファイルinline化
    • この2つの方法は、通常、キャッシュの期限切れポリシーを事前に作成し、通常はバージョン番号を使用して制御します.以下で詳しく説明します.さもなくばファイルの新版がオンラインになって、ユーザーのクライアントはまだ古い版で、これは面倒で大きくて、その上このような問題、まだデバッグがよくなくて再現しにくいです.
    Loaderを使用した静的ファイルのロード
    要求はいずれも動的に発行されるので,要求に対して処理をブロックすることができる.大まかな流れは以下の通りです.
  • 要求されたファイルurlがlocalStorageにキャッシュされているかどうかを確認
  • がなければ、第2大歩
    • まで
  • ある場合は、ファイルが期限切れかバージョン番号が一致しているかどうかを判断します.
  • が期限切れまたは不一致で、2番目のステップ
    • まで
  • ファイルの内容は有効で、4番目のステップ
    • までです.

  • リモートファイル
    • を要求する
  • キャッシュ最新ファイル内容
  • 実行ファイル内容
    • この方法にはオープンソースライブラリがあります:basket.js.
    サーバ側による静的ファイルのinline化
    この方法は、上記よりもさらに、最初の応答時にlocalStorageに入れる必要があるファイルをhtmlに組み込み、その後の応答のたびにファイルのバージョンが変化しない限り、localStorageからファイルをロードするコードをレンダリングします.このような利点は、初めてであってもリクエスト回数を効果的に減らすことです.
    バージョン番号が一致しません(バージョン番号はCookieに記載でき、最初のアクセスにはバージョン番号がありません)、サービス側は内容に応答します.
    ><span class="token script language-javascript"> <span class="token keyword">function <span class="token function">script2ls<span class="token punctuation">(id<span class="token punctuation">) <span class="token punctuation">{ <span class="token keyword">var script <span class="token operator">= document<span class="token punctuation">.<span class="token function">getElementById<span class="token punctuation">(id<span class="token punctuation">)<span class="token punctuation">; <span class="token keyword">if <span class="token punctuation">(script<span class="token punctuation">) <span class="token punctuation">{ localStorage<span class="token punctuation">[id<span class="token punctuation">] <span class="token operator">= script<span class="token punctuation">.innerHTML<span class="token punctuation">; <span class="token punctuation">} <span class="token punctuation">} <span class="token tag"><span class="token tag"><span class="token punctuation">> id<span class="token attr-value"><span class="token punctuation">=<span class="token punctuation">"jquery.js<span class="token punctuation">"<span class="token punctuation">><span class="token script language-javascript"><span class="token punctuation">.<span class="token punctuation">.<span class="token punctuation">.jquery source code<span class="token punctuation">.<span class="token punctuation">.<span class="token punctuation">.<span class="token tag"><span class="token tag"><span class="token punctuation">> ><span class="token script language-javascript"><span class="token function">script2ls<span class="token punctuation">(<span class="token string">'jquery.js'<span class="token punctuation">)<span class="token tag"><span class="token tag"><span class="token punctuation">>

    バージョン番号が一致し、サービス側の応答内容:
    ><span class="token script language-javascript"> <span class="token keyword">function <span class="token function">ls2script<span class="token punctuation">(id<span class="token punctuation">) <span class="token punctuation">{ <span class="token keyword">var script <span class="token operator">= document<span class="token punctuation">.<span class="token function">createElement<span class="token punctuation">(<span class="token string">'script'<span class="token punctuation">)<span class="token punctuation">; script<span class="token punctuation">.text <span class="token operator">= localStorage<span class="token punctuation">[id<span class="token punctuation">]<span class="token punctuation">; document<span class="token punctuation">.head<span class="token punctuation">.<span class="token function">appendChild<span class="token punctuation">(script<span class="token punctuation">)<span class="token punctuation">; <span class="token punctuation">} <span class="token tag"><span class="token tag"><span class="token punctuation">> ><span class="token script language-javascript"><span class="token function">ls2script<span class="token punctuation">(<span class="token string">'jquery.js'<span class="token punctuation">)<span class="token tag"><span class="token tag"><span class="token punctuation">>

    ただし、localStorageキャッシュファイルを使用するとXSSのリスクがあり、永続的なダメージを与える可能性があります.
    どうげんウィンドウつうしん
    思わずまた聞くかもしれませんが、postMessageがあるのではないでしょうか.そうですpostMessageは確かにウィンドウまたはiframe間の通信に使用できますが、新しいウィンドウまたはiframeを開くハンドルオブジェクトを手に入れる必要があることを前提としています.
    var popup = window.open(...popup details...); popup.postMessage("hello there!", "http://example.com");

    これで新しい窓に新しい窓を開けると、メッセージが伝わりにくくなるようです.
    なぜウィンドウ間で通信するのか聞きたいかもしれません.良い問題は、シーンを応用する技術がないのはごろつきだ.マルチウィンドウ共通のコンポーネントのように、データのリアルタイム同期に高い要求があるのは、この技術の応用シーンです.例えば、通知センターの上の未読数、2つのウィンドウ、Aウィンドウが8に更新され、Bウィンドウに切られたのか9になったのか、体験が一致していないので、この例は関系なくかゆいかもしれません.例えば、ショッピングカート、2つの製品ウィンドウ、Aウィンドウをショッピングカートに追加し、Bウィンドウを切ってショッピングカートに追加し、A追加の製品がないことを発見すると、深刻になります.これはもちろん、各ウィンドウをバックグラウンドに接続することで更新することもできますが、ユーザーが10数個のウィンドウを開くとオーバーヘッドが大きくなります.
    同源ウィンドウ通信があれば、バックグラウンドと接続するウィンドウが1つしかなく、更新を受けた後、他のウィンドウにブロードキャストすればいいです.こんなにたくさん言ったのに、実現原理はどうなっているのでしょうか.
    実は原理も簡単で、localStorageの中でいかなる変動があるたびにstorage事件をトリガーして、すべてのウィンドウはこの事件を監視して、いったんウィンドウがlocalStorageを更新すると、他のウィンドウはすべて通知を受け取って、事件の中のkeyによって関心のない変動を濾過します.原理は簡単ですが、完全な放送メカニズムを実現するには複雑です.
  • 各ウィンドウの一意ID
    • を管理する.
  • メッセージ重複防止
  • 関心のないウィンドウ
    • へのメッセージ送信を防止する.
  • ウィンドウ心拍keep alive
  • メインウィンドウ選挙
  • ...

    • 心配しないで、すでに良いオープンソースが実現しました:diy/intercom.js、tejacques/crosstab
    その他
    フロントエンドDBとしての記憶媒体
    キー値ペアでデータを保存するのに満足していないかもしれませんが、より複雑なデータ構造を保存したいと思っています.
    json形式のデータへの柔軟なアクセス:typicode/lowdb
    データCURDに対するsql操作:agershun/alasql
    フォームの自動永続化
    フォームを記入する際、ブラウザが潰れたり、誤操作したりして記入内容が失われたりした場合、ユーザーの心も潰れているはずです.エラー操作には、ブラウザを閉じたり、現在のページから飛び出したりする前にユーザーに注意するbeforeunloadイベントも追加できます.ブラウザがクラッシュして、データの変更をリアルタイムでバックグラウンドに保存するのはオーバーヘッドが大きいようで、リアルタイムでlocalStorageに保存するのは良い解決策で、偶然で、オープンソースの実現もあります:simsalabim/sisyphus
    まとめ
    ファイルキャッシュにはより良いソリューションがあります.間違いなく、Service WorkerのCacheStorageです.
    しかし、脳の穴が開いている考えを多く理解することは、問題を解決する考え方を広げるのに役立ちます.
    Enjoy open source ❤️
    参考:1:Always catch LocalStorage security and quota exceeded errors 2:Measuring localStorage Performance 3:SRIを使用してlocalStorageコードのセキュリティを強化する
     
     
    転載先:https://www.cnblogs.com/zhaobao1830/p/7644069.html
    python:txtドキュメントの開始位置にデータを挿入する
    html画像をデータベースにアップロードする2つの方法form方式とAjax方式