ホームページ > 記事 > ウェブフロントエンド > html5の2つの保存方法とは
html5の2つの保存方法とは
- 青灯夜游オリジナル
- 2022-01-23 17:36:242327ブラウズ
html5 の 2 つの保存方法は、1. アプリケーション キャッシュ (アプリケーション キャッシュ)、Web アプリケーションをキャッシュしてネットワークなしでも使用できること、2. ローカル ストレージ (localStorage または sessionStorage)、データを保存できることです。クライアント側に保存されます。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
1.アプリケーション キャッシュ
HTML5 ではアプリケーション キャッシュが導入されています。これは、Web アプリケーションをキャッシュし、ネットワークがなくても使用できることを意味します。
#アプリケーション キャッシュには 3 つの特徴があります
#オフライン ブラウジング- キャッシュされたリソースの読み込みが高速化
- サーバーの負荷を軽減しますの場合、ブラウザはサーバーから更新または変更されたリソースのみをダウンロードします。
- 使用方法は、HTML タグにマニフェスト属性を追加することです
指定された各マニフェスト ページがキャッシュされますユーザーがそこを訪問したとき。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェスト ファイルで直接指定されていない限り)。
マニフェスト ファイルの推奨ファイル拡張子は「.appcache」です。
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
マニフェスト ファイルは、何がキャッシュされているか (何がキャッシュされていないのか) をブラウザーに伝える単純なテキスト ファイルです。
マニフェスト ファイルは 3 つのセクションに分けることができます。
キャッシュ マニフェスト - この見出しの下にリストされているファイルは、最初のダウンロード後にキャッシュされます- ネットワーク - ファイル内この見出しの下にリストされているファイルはサーバーへの接続が必要であり、キャッシュされません
- FALLBACK - この見出しの下にリストされているファイルは、ページにアクセスできない場合のフォールバック ページ (404 ページなど) を指定します
- 完全なマニフェスト ファイル
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
2. ローカル ストレージ
HTML5 は、クライアント側にデータを保存するための 2 つの新しいメソッドを提供します:
#localStorage -時間制限のないデータ ストレージ
- sessionStorage - セッションのデータ ストレージ
- 以前は、これらはすべて Cookie によって行われていました。ただし、Cookie はリクエストごとにサーバーに渡されるため、速度が遅く非効率的になるため、大量のデータを保存するのには適していません。
localStorage と sessionStorage のメソッド:
setItem は値を格納します。
目的: 値をキー フィールドに保存する
コード例:
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");getItem が値を取得する
目的: ローカルに保存されている値を取得する指定されたキー使用法: .getItem(key)
コード例:
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");removeItem delete key
使用法: 指定されたキーにローカルに保存されている値を削除します使用法: .removeItem (key)
コード例:
sessionStorage.removeItem("key");
localStorage.removeItem("site");clear すべてのキー/値をクリア
使用法: すべてのキー/値をクリア使用法: .clear()
sessionStorage は永続的なストレージではないため、ブラウザを閉じるとクリアされます。 LocalStorage は永続的なローカル ストレージに使用され、データが積極的に削除されない限り、データが期限切れになることはありません。
関連する推奨事項:「html ビデオ チュートリアル
」以上がhtml5の2つの保存方法とはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。