ホームページ  >  記事  >  ウェブフロントエンド  >  html5の2つの保存方法とは

html5の2つの保存方法とは

青灯夜游
青灯夜游オリジナル
2022-01-23 17:36:242322ブラウズ

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 -時間制限のないデータ ストレージ

    sessionStorage - セッションのデータ ストレージ
  • 以前は、これらはすべて 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。