ホームページ > 記事 > ウェブフロントエンド > Web ストレージ -- Web ストレージの詳細な紹介
Webストレージの分類
クライアントとサーバー
Webストレージを理解する
Webアプリケーションの開発に伴い、クライアントストレージの用途はますます増えていますが、クライアント側ストレージの実装もますます多様化しています。最も簡単で互換性のある方法は Cookie ですが、Cookie を実際のクライアントとして保存する場合には依然として多くの欠点があります。同時に、さまざまなブラウザーにも独自の保存方法があります。たとえば、userData Behavior は IE6 以降で使用でき、globalStorage は Firefox で使用でき、Flash Local Storage は Flash プラグインでも使用できます。ただし、これらの方法には互換性などの面、およびクライアント側で欠点があります。ストレージは最適な方法ではありません。
上記の状況により、html5ではいくつかの新しい保存方法が追加されました。 Web データベースと Web ストレージ。
さまざまなストレージ方法の違い
ウェブストレージについて知る
利点
欠点
ローカルストレージ
セッションストレージ
ブラウザサポート
これは、クライアントが HTML5 にデータを保存するための新しい方法であり、操作が簡単な API を提供し、キー値を設定するだけで済みます。各ユーザードメインに保存されるデータサイズは5M~10Mです。以下の sessionStorage と localStorage が含まれます。同時に、Web データベースも含まれます。
保存されるデータサイズが大きくなります。
保存されたデータはクライアント側に保存され、ブラウザと通信する必要がないため、帯域幅の消費を削減できます。
は豊富で使いやすい API を提供し、開発者が開発を容易にします。
独立した収納スペースを使用します。各ドメインの下に独立したストレージ スペースがあり、各スペースは完全に独立しているため、データの混乱を避けることができます (これは実際には Cookie とあまり変わりません)。
各ドメインに保存されているデータは独立した空間であるため、1つのドメイン配下で他のドメインのデータを利用することはできません。
保存されたデータは当社が積極的に削除することなく常に保存され、データは暗号化されていないため、データの盗難が容易に発生します。
localStorage は、私たちが積極的にデータを消去しない限り、時間制限のない保存方法です。
sessionStorageはセッションの保存方法であり、ブラウザや操作ウィンドウを閉じると、sessionStorageに保存されたデータは失われます。同じセッション内のページでのみ同時に使用できます。
IE8.0以降、Firefox3.0以降、Opera10.5以降、Chrome3.0以降、Safari4.0以降。
Cookieの仕組み
利点
欠点
クライアント側の保存方法として、Cookieは主にテキストストレージを使用します。アプリケーションが Cookie を使用すると、サーバーは Cookie をクライアントに送信し、クライアントはそれを保存します。ユーザーが次回アクセスすると、クライアントに保存されている Cookie がサーバーに送信されます。開発では、最も一般的なケースはユーザー情報を保存するために使用されます。
シンプルで便利
データ送信はブラウザが担当
ブラウザが独自に異なるサイトのデータを管理しており、データの混同が起こりにくい
上記の通り、Cookie の動作原理、サーバーからクライアント、およびクライアントからサーバー間の通信。これにより、不必要な帯域幅の消費が発生し、ページの読み込み速度にも影響し、ユーザー エクスペリエンスが低下します。
保存されるデータのサイズ制限。Cookie は 4kb のデータしか保存できません。
セキュリティ。 Cookie データはテキスト形式でクライアントに保存されるため、セキュリティが非常に低く、簡単にデータの盗難につながる可能性があります。
数量制限があります。ほとんどのブラウザが保存できる Cookie の数は 30 ~ 50 で、一部のブラウザは 300 をサポートしますが、IE6 は 20 のみをサポートします。
データの整合性。クライアントが最高のセキュリティ レベルに設定されている場合、Cookie の有効期限が切れます。
Cookieの長所と短所
Webストレージの長所と短所
サンプルコード
注: localStorage と sessionStorage は両方の文字列オブジェクトを保存します。
作成
ストレージを取得
ストレージを削除
<script type="text/javascript">// 创建均使用localStorage做示例,sessionStorage语法方式和localStorage是一样的,localStorage(key, value);或者localStorage.key = "value";window.onload = function(){if (window.localStorage) { localStorage.setItem("userName", "张三");} }</script>
<script type="text/javascript">window.onload = (window.localStorage &&"userName", "张三""userName"</script>
以上がWeb ストレージ -- Web ストレージの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。