html5の2つの保存方法とは-フロントエンドQ&A-php.cn

html5の2つの保存方法とは

青灯夜游

リリース： 2022-01-23 17:36:24

オリジナル

2377 人が閲覧しました

html5 の 2 つの保存方法は、1. アプリケーションキャッシュ (アプリケーションキャッシュ)、Web アプリケーションをキャッシュしてネットワークなしでも使用できること、2. ローカルストレージ (localStorage または sessionStorage)、データを保存できることです。クライアント側に保存されます。

html5の2つの保存方法とは

このチュートリアルの動作環境: 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 -時間制限のないデータストレージ

以前は、これらはすべて Cookie によって行われていました。ただし、Cookie はリクエストごとにサーバーに渡されるため、速度が遅く非効率的になるため、大量のデータを保存するのには適していません。

localStorage と sessionStorage には、setItem()、getItem()、removeItem() などの同じ操作メソッドがあります。

localStorage と sessionStorage のメソッド:

setItem は値を格納します。
目的: 値をキーフィールドに保存する

使用法: .setItem(key, value)

コード例:

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 サイトの他の関連記事を参照してください。

html5の2つの保存方法とは

1.アプリケーション キャッシュ

指定された各マニフェスト ページがキャッシュされますユーザーがそこを訪問したとき。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェスト ファイルで直接指定されていない限り)。

HTML5 は、クライアント側にデータを保存するための 2 つの新しいメソッドを提供します:

1.アプリケーションキャッシュ

指定された各マニフェストページがキャッシュされますユーザーがそこを訪問したとき。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェストファイルで直接指定されていない限り)。