クライアントアプリケーションストアは迅速なパフォーマンスの最適化が行われるための素晴らしい方法です。ブラウザ内のデータを格納することで、ユーザーは常にサーバ情報に同じ要求を得ることはありません。あなたがオフラインになっているとき、リモート・サーバ上のデータを要求するのに便利であるのではなく、ローカルに保存されたデータを使用して、あるいはオンラインのユーザーもその恩恵を受けることができます。クッキー、のsessionStorage、ローカルストレージ（より正確には、「Webストレージ」）、のIndexedDB、のuserData：クライアントのストレージは、これらの技術によって達成することができます。
、クッキー
1、クッキーの役割
それがクッキーになると、クッキーは、実際には2つの主要な機能を持っている、第一の機能は、欠点を解決するために使用されるHTTPクライアントに保存されているステートレスセッション情報、第二の機能は、我々が今頻繁に使用するものである一方で、利用者の状態を記録クッキーは、クライアントにいくつかの他のデータを保存します
2、クッキーの設定
一般に、クッキーを構成ブラウザに格納された次の情報から構成され
（1）名称：クッキーの一意の名前を決定
（2）値：クッキーに格納されている文字列値、値が符号化されなければならないURL
（3）フィールド：ドメインに有効であるクッキーを、全てのクッキーに送信されたドメインの要求情報が含まれ
（4）パス：指定されたドメインのパス、クッキーがサーバに送られるべきです
（5）障害時間：タイムスタンプが示すクッキーを削除しなければならないとき
（6）安全標識は：あなたが指定した後でSSL接続を使用する場合にのみ、クッキーがサーバーに送信されました
3、どのようにデータを保存するためにクッキーを使用します
一般的には、クッキーを生成するための2つの方法、1が指定されているのSet-Cookieは、HTTPサーバが応答を送信するとき、我々はJSを生成し、別のクッキーを使用することができ、指定があります
URLエンコードを必要と我々はエンコードとデコードの操作する必要がある場合にクッキークッキーを書き込み、読み込み時にクッキーので、そう、便宜のために、私たちはクッキーの操作目標を書くことができます
VAR CookieUtil = {
得る：関数（名前）{
VAR COOKIENAME = encodeURIComponentで（名）+ "="、
cookieStart = document.cookie.indexOf（COOKIENAME）
にcookievalue = NULL;
IF（cookieStart> -1）{
VAR cookieEnd = document.cookie.indexOf（ ";"、cookieStart）。
（cookieEnd == -1）であれば{
cookieEnd = document.cookie.length。
}
にcookievalue =は、decodeURIComponent（document.cookie.substring（cookieStart + cookieName.length、cookieEnd））。
}
にcookievalueを返します。
}、
セット：関数（名前、値、有効期限が切れ、パス、ドメイン、セキュア）{
VAR cookieText = encodeURIComponentで（名）+ "=" + encodeURIComponentで（valeu）。
（データのinstanceof期限切れになる）{もし
"; =期限切れに" +（expires.toGMTString）cookieText + =。
}
（パス）{もし
cookieText + = ";パス=" +路と
}
（ドメイン）{もし
cookieText + = ";ドメイン=" +ドメイン。
}
{（確保）する場合
cookieText + = ";安全な";
}
document.cookie = cookieText。
}
未設定：関数（名前、パス、ドメイン、固定）{
this.set（名称、 ""、新しい日付（0）、パス、ドメイン、セキュア）。
}
}
我々はいくつかの状態データについて考えるとき、そのようなユーザーが広告をクリックしたかどうかのストレージとして、クッキーに保存され、次のように、それは設定することができます
CookieUtil.set（ "ifClick"、 "真"）;
我々は、ユーザーが広告をクリックしたかどうかを確認したいときは、クッキーからのデータを思い付くする必要があるので、あなたは、このようなデータを得ることができます
CookieUtil.get（ "ifClick"）;
私たちの預金クッキーからデータを取得することによってIfClick、我々は対応する値を得ることができます本当です、まあ、このユーザーが広告をクリックした、それに赤い点が表示されません。
4、クッキーの欠点
クッキーは、いくつかのデータを格納することができるが、メモリはいくつかの欠点下回っているが、
（1）クッキーは、クライアントとサーバ側との間で前後に転送し、不必要な資源を無駄にします
記憶サイズは（2）一般的に、各フィールドに対して、わずか20に配置されたクッキーを制限するクッキーを有し、各クッキーは4キロバイトのサイズを超えることはできません
クライアントに格納されたクッキーの安全性、クッキー、そこに含まれる任意のデータは、他の人がアクセスすることができる（3）、クッキーセキュリティが比較的低いです
二、ウェブストレージメカニズム
次に、私たちは主のsessionStorageとlocalStrorage、店舗HTML5でそれについて言わなければなりません
1.ウェブストレージとは何ですか
ウェブストレージは、データを格納するためのメカニズムでは、クライアントである、主な目的は、クライアントとサーバー上のデータなしで、データは厳密にクライアントに制御する必要があるクッキーによってもたらされる制限のいくつかを克服することです前後に送信間およびセッション間で大量のデータを保存します
一般的には、ウェブストレージが永続的なクライアント側のデータプランとしてglobalStorageに取って代わる改訂HTML5仕様の両方で観客、のsessionStorageとglobalStorage、今のlocalStorageの定義が含まれ、そして、のは、彼らが持っているものを見てみましょうそれを区別
2、のsessionStorage
（1）のsessionStorageは何ですか
sessionStorageオブジェクトはのsessionStorageに格納されたデータは、ページの更新間で存在することができ、つまり、ブラウザを閉じるにのみデータが保存され、ブラウザが閉じられたときに、セッションクッキーなどのオブジェクトは、消えます、セッションに固有のデータを格納しています
（2）どのように格納されたデータを使用するのsessionStorage
sessionStorageストレージオブジェクトがインスタンスであるので、データSetItem関数を格納する場合（使用）または直接格納された新しい属性データにすることができます
//データ格納方法を使用 sessionStorage.setItem（ "真の" "ifClickを"）; //属性は、データを格納するために使用 sessionStorage.ifClick = "TRUE";
我々はいくつかのデータを取得したいときは、データを取得するために使用できるのgetItem
sessionStorage.getItem（ "ifClick"）;
友人は、もちろん、価値のsessionStorageプロパティとキー（）メソッドの長さを介して取得することができifClick私たちは今、正常値を取得しています
（3）のsessionStorage機能
あなたがページ間同じのsessionStorageを操作したい場合は、元のポリシー制限同じ、ページは同じ名前と同じホスト・ポートの下で、同じプロトコルである必要があります
B、1つのタブの制限は、単一の操作制限のsessionStorageタブで、このタブページビューの相同性は、データのsessionStorageを共有することができます
C、唯一のローカルに保存されているが、seesionStorageデータは、一緒に、サーバーへのHTTP要求に従わないであろうローカルでのみ有効になり、そしてあなたは、タブを閉じた後にデータを消去し
D、ストレージ、seesionStorageは、ストレージ・キーを使用して、値の道
eは、ストレージ上限：上限異なるブラウザの店舗は同じではありませんが、次の5メガバイトで、ほとんどのブラウザ上限
3、globalStorage
（1）globalStorageは何ですか
初期のWebストレージの一環として、このオブジェクトの目的は、セッション間でデータを格納することですが、特定のアクセス制限はありますが、今のlocalStorage globalStorageを交換されています
（2）格納されたデータglobalStorageを使用する方法
globalStorageを使用するように、最初のデータにアクセス可能であるドメインを指定し、プロパティタグカッコを用いて実現することができます
globalStorage [ "aaa.com"] ifClick = "true" を。
上記のコードでは、訪問は、ドメイン名aaa.comの収納スペースのためである、とaaa.comのために、この収納スペースとそのサブドメインのすべてがアクセス可能である、我々はこのようなデータを取得するために行うことができます
globalStorage [aaa.com] .getItem（ "ifClick"）。
globalStorageは今、あまり使用しているので、あなたがのlocalStorageを使用し、または使用する場合
（3）globalStorage機能
あなたは、removeItem（）を使用するか、削除、またはユーザーがブラウザのキャッシュをクリアしていないクライアントは、文書や長期保存ユーザー設定を保存することが適しているので、データは、ディスク上に保存されます削除しない場合
4、のlocalStorage
（1）のlocalStorageとは何ですか
クライアントデータソリューションを永続化するようHTML5仕様を改定のlocalStorageオブジェクトは、ルールは事前予約されていますので、あなたが同じのlocalStorageオブジェクト・ページにアクセスするには、、のlocalStorageに任意のアクセスルールを指定することはできません、globalStorageをもたらした、とglobalStorage異なっていますこれは、同じポートに、同じプロトコルを使用して、同じドメイン名から来なければなりません
（2）格納されたデータのlocalStorageを使用する方法
localStorageインスタンスは、のsessionStorageとしてそれを使用するように使用することができますので、ストレージがあります
localStorage.setItem（ "ifClick"、 "真"）;
我々は、データを取得したいときは、このように取得することができます
localStorage.getItem（ "ifClick"）;
JSを介してデータを保持するか、ユーザを削除するには、同じ規則に従う、globalStorageのデータは同じデータに格納され、内のlocalStorageに格納されているブラウザのキャッシュをクリアします
（3）のlocalStorage機能
A、のlocalStorageが、これは、帯域幅を節約することができますクッキーに比べて、データベースのフロントページのサイズ5Mに相当し、要求されたデータはローカルに直接保存されている最初の時間になりますが、これは、ブラウザの高いバージョンでのみですのみのサポートで
B、現在のすべてのブラウザは置くのlocalStorage値型が文字列型として定義され、この変換は日常より一般的なJSONオブジェクト型を私たちの一部を取ります
C、のlocalStorageは基本的に文字列の読み取りで、格納されたコンテンツや複数の単語は、メモリ容量を消費する場合はページがカードを変更します
最後に、私たちは、のsessionStorageとのlocalStorageは、クッキーのいくつかの制限を克服してきていると言いたい、彼らは共通で多くの機能を持っている、唯一の違いは、のlocalStorageのlocalStorageとのsessionStorageは、永続的なストレージに属している、とのsessionStorageは時間に属している場合、セッションの終了、のsessionStorageキーを空にすることです。
PS：[すべてのブラウザでのlocalStorageの大きさは同じではありませんサポートし、クロムは5Mで、IE10は1630Kです。jsがのlocalStorageのサイズをサポートするために、次の無名関数のテスト別のブラウザを使用することができます]
（関数（）{
IF（window.localStorage）{！
はconsole.log（） '当前浏览器不支持のlocalStorage！'
}
VARテスト= '0123456789';
varが追加=関数（NUM）{
NUM + = NUM;
IF（ num.lengthの== 10240）{
テスト= NUM;
リターン;
}
追加（）NUM;
}
テスト（ADD）;
VAR和=テスト;
VARショー=たsetInterval（関数（）{
和+ =テスト;
{試みる
window.localStorageを.removeItem（ 'テスト'）;
window.localStorage.setItem（ 'テスト'、和）
はconsole.log（sum.length / 1024 + 'KB'）;
}キャッチ（E）{
アラート（sum.length / 1024 + 'KB超出最大限制'）;
てclearInterval（ショー）;
}
}、0.1）
}）（）
三、のIndexedDB
1、なぜのIndexedDB
データ・ストレージ従来のブラウザプログラム、大量のデータを格納するのに適していない：クッキー4キロバイト以下のサイズ、およびバックサーバに各要求を、10メガバイト（様々な異なるブラウザ）に2.5メガバイトの間のlocalStorageとはしません検索機能を提供し、したがって、誕生の背景で新しいソリューションの必要性をカスタムインデックスを作成することはできませんのIndexedDB
2.のIndexedDBは何ですか
素人の面では、のIndexedDBローカルデータベースは、ブラウザによって提供され、それがウェブスクリプトを作成して操作することができ、のIndexedDBは、大量のデータを格納見つけるためのインタフェースを提供するだけでなく、インデックス化でき、のlocalStorageこれらは利用できません、それはデータベースのタイプです言葉、のIndexedDBは、NoSQLのデータベースに近いリレーショナルデータベース（SQLクエリがサポートされていない）、に属していません
3、のIndexedDB機能
、ストレージ・キーの内部のIndexedDBオブジェクトリポジトリ（オブジェクトストア）のストアデータを用いて、すべてのデータタイプが直接JavaScriptオブジェクト、オブジェクトリポジトリ、「鍵ペア」の形式で格納されたデータを、それぞれ含む、格納することができます主キーは、対応するデータレコードを持って、主キーは一意であり、重複することができない、それ以外の場合はエラーがスローされます
B、誘導：のIndexedDBがブラウザを操作する場合、ユーザは依然としてのlocalStorageとは対照的に、後者の操作は、大量のデータを読み書き防止するように設計された、同期、非同期で他の操作を実行することができるロックされていない、ダウンページショー
Cは、サポートサービス：のIndexedDBサポートサービス（トランザクション）が、これはトランザクションが発生する前に、一連のステップでは、限り、ステップが失敗したとして、トランザクション全体が削除されていますが、データベースがあるだけでデータの一部を書き換えている、状態にロールバックされることを意味し状況
D、相同制限：のIndexedDBは、同種制限によって、それぞれがそのドメイン名を作成するためのデータベースに対応し、ページのみ、独自のドメイン名でデータベースにアクセスすることができますが、クロスドメインのデータベースにアクセスすることはできません
E、大規模なストレージ：のIndexedDBのlocalStorage収納スペース、250メガバイトより一般的に少ない、またはさらに制限なしよりも大きいです
Fは、バイナリストレージをサポート：のIndexedDBだけでなく、文字列を格納することができ、バイナリデータも格納することができる（ArrayBuffer Blobオブジェクトとオブジェクト）
四、IEのユーザーデータ
H5はのlocalStorageデータストレージとのsessionStorageが、つまりはそれをサポートしていない下位バージョンで行うことができますが、これはどのように行うことができますか？つまり、データを格納するために、カスタム動作を通じてマイクロソフトは、永続的なユーザーデータの概念を導入します
1.のuserDataは何ですか
userDataはすなわち、のuserDataは、データを格納するストレージ領域（UserDataのストア）にデータを書き込むことによりUserDataのを格納するデータ記憶装置である、XML形式でのuserdataクライアントに格納されたデータは、ストレージUserDataのIEブラウザにのみ適用されます削除または人為的にスクリプトによって設定されない限り、IEブラウザを閉じたり更新されていても、UserDataのストアを保存した後、次のページを入力して、データを失わずに再ロードすることができ、つまり、データは常に存在します有効期限データ
一般的に、のuserDataは、各文書はデータの128キロバイトまで保存することができ、ドメイン名ごとにデータの1メガバイトまで、クッキーに保存されたデータが何よりも大きくなるではないでしょうか？
データを保存する方法2、のuserData
我々はのuserdataストアデータを使用したい場合は、最初の要素のCSSのuserdata動作を指定する必要があります。
<divのスタイル= "行動：URL（＃デフォルト＃のuserData）" ID = "データストア> </ div>
要素がのuserdata振る舞いを使用すると、あなたは、ブラウザのキャッシュにデータを送信するために、あなたはまた、保存（）メソッドを呼び出し、それをあなたがデータ・スペースを節約したい名前を伝える必要があり、上記のデータを保存するためのsetAttribute（）メソッドを使用することができます、名前データ空間は、異なるデータセットを区別するために使用される、完全に任意であることができます
VARデータストア=のdocument.getElementById（ "データストア"）; dataStore.setAttribute（ "ifClick"、 "真"）; dataStore.save（ "ClickInfo"）;
上記のコードでは、setAttributeメソッドを使用してデータを保存した後、saveメソッドを呼び出して、データ・スペースClickInfoの名前を指定し、次のページをロードした後、同じデータ空間は、データを取得するために、ロード・メソッドを使用して指定することができます
dataStore.load（ "ClickInfo"）; dataStore.getAttribute（ "ifClick"）;
上記のコードでは、ロードする（）の呼び出しは、データ・スペースClickInfoすべての情報を取得し、データ要素を介してアクセスすることができ、彼らだけが使用できる前に、データの正確な完了をロードした後、よく、今私たちが正常に取得しています友人の値にifClick、ifClickは赤い点が表示されない、まあ、広告がクリックされた、真であります
getAttribute（）が存在しない名前をコールするか、名前にロードされていない場合は、nullを返します、我々はまた、特定のデータを削除するには、removeAttribute（）メソッドを使用しますすることができます
dataStore.removeAttribute（ "ifClick"）;
3、のuserdata欠点
（1）のuserDataだけつまりデータストレージ用
（2）クッキーへのアクセスにのuserdataアクセス制限や制約は、同じパスに、同じドメイン名から来て、同じプロトコルにアクセスするために保存されたスクリプトを使用する必要があります
（3）のuserdataデータは、重要な情報を格納しない、安全ではありません
-------------------------------------------------- -------------------------------------------------- --------
オリジナルリンク：https://www.cnblogs.com/Yellow-ice/p/10507472.html
================================================== ===========分割ライン===================================== ================================================== =============
localStorageを単一のページとは異なるページの変化を監視します
1.単一ページのモニターイベントストレージ
VAR orignalSetItem = localStorage.setItem。
localStorage.setItem =関数（キー、newValueに）{
VARのsetItemEvent =新しいイベント（ "setItemEvent"）。
setItemEvent.key =キー。
setItemEvent.newValue = newValueに。
window.dispatchEvent（setItemEvent）。
orignalSetItem.apply（この、引数）;
}
window.addEventListener（ "setItemEvent"機能（E）{
にconsole.log（e.key + "~~~" + e.newValue）
}）。
2.別のページ
1）ストレージ・イベントを監視します
<！DOCTYPE HTML>
<HTML>
<HEAD LANG = "EN">
<タイトル> A </ TITLE>
</ HEAD>
<BODY>
<SCRIPT>
window.addEventListener（ "ストレージ"、機能（E）{
警告（E .newValue）;
}）;
</スクリプト>
</ BODY>
</ HTML>
2）のlocalStorageを変更
<！DOCTYPE HTML>
<HTML>
<HEAD LANG = "EN">
<タイトル> B </ TITLE>
</ HEAD>
<BODY>
<SCRIPT>
localStorage.clear（）;
localStorage.setItem（ 'FOO'、 'バー'）;
</スクリプト>
</ BODY>
</
HTML> ----------------
原文链接ます。https：//blog.csdn.net/qq_42076140/article/details/80307326
VIEW ------------------------------------------- ------ ------------------------
変更、リアルタイムの更新を監視する方法をlocalStorage.setItem書き換えますvue-
問題への監視値の変更を解決ローカルに保存されているJSないリアルタイムの
問題の説明：私たちは、内部のjsで一定のlocalStorageの値を取得しますが、後でそれが変更される可能性があり、そして我々は、再びその値を取得することはできません一度だけ行っJSもちろん、あなたが取得するためにページを更新することができますが、我々はこの時点でページが、ページを更新することができない場合：
私たちは新しいイベントになり、新しい値を設定するには、SetItem関数のメソッドを呼び出すときに、書き換えのlocalStorage方法をSetItem関数ことができます（「setItemEvent」）
が、ちょうどイベントの例は、どのようにそれを監視するには？
私たちは、イベントを送出するウィンドウを聞くことができるようにwindow.dispatchEvent（）このメソッドを使用することができます。このイベントのうち、新たなインスタンスが呼び出しが新しい値SetItem関数直接割り当てをすることができます得ることができたときに、コールをそのウィンドウを監視するためにバインドされて
具現化
、新しいutilsの、新しいtools.jsの下で最初のsrcフォルダにそれはdispatchEventStroage方法がスローされ
window.dispatchEvent配布、SetItem関数がトリガー使用する場合、SetItem関数イベントを書き換える//イベント
dispatchEventStroage（）{
CONST signSetItem = localStorage.setItem
localStorage.setItem =関数（キー、ヴァル）{
LETのsetEventイベント新しい新=（ 'setItemEvent'）
setEvent.key =キー
setEvent.newValue =ヴァル
window.dispatchEvent（setEvent）
signSetItem.apply（この引数）
}
}
グローバルmain.jsの導入や、使用中、およびその問題を解決するためにdispatchEventStroageメソッドを呼び出すには、すぐにsetitemEvent有効になりません
/「@ / utilsのからインポートツールをツール
Vue.use（ツール）
//、setItemEventはすぐには反映されません解決イベントディスパッチ高い強制使用する
Tools.dispatchEventStroageを（）
そして、あなたが使用することができ
、我々はトークン運ぶためにリクエストを送信する必要がある場合は、フィールドを毎回、トークンは時々内部のlocalStorage存在してもよいが、トークンが変更されたとき、私たちは、JSが変更されたかわからないので、私たちは、上記の方法を使用する必要があります。
{reqHeadersは= CONST
受け入れ：「テキスト/ JSON」は、
各要求フィールドが確認担持後トークン//最初のログオントークンの後に返される
トークン：localStorage.getItem（「トークン」）||「」
}
//グローバルイベントと更新SetItem関数のリスニングウィンドウのlocalStorage
window.addEventListener（ 'setItemEvent'、関数（E）{
reqHeaders.token = e.newValue
}）
----------------
説明リンクします。https：//blog.csdn.net/weixin_43869192/article/details/85061248