HTML5 ローカル ストレージ テクノロジについて話す_html5 チュートリアルのスキル

ローカル キャッシュは、HTML5 で登場した新しいテクノロジーです。このテクノロジーの登場により、モバイル Web の開発が可能になります。高パフォーマンスのモバイル アプリを構築する場合、速度が重要であることは誰もが知っています。 HTML5 が登場する前は、Cookie のみがデータを保存でき、そのサイズはわずか 4kb でした。これにより、アプリケーション ファイルのストレージが大幅に制限され、Web 開発のモバイル アプリケーションの読み込み時間が長くなります。ローカル ストレージを使用すると、Web モバイル アプリケーションをネイティブに近づけることができます。

ブラウザでは、ローカル ストレージは window.localStorage を通じて呼び出されます。ブラウザがローカル ストレージをサポートしているかどうかを判断するコードは次のとおりです:

XML/HTML コードコンテンツをクリップボードにコピー

1. if(window.localStorage){
2. alert('このブラウザは localStorage をサポートしています');
}その他{
alert('このブラウザはlocalStorageをサポートしていません');
4. }
データをローカルに保存したい場合、最も簡単な方法はウィンドウ化することです。 localStorage にプロパティを追加し、値を割り当てます。たとえば、値が Tom であるデータ名を保存したい場合、次の方法でそれを実現できます:

XML/HTML コード

コンテンツをクリップボードにコピー

window.localStorage.name

1. = “トム”
ここで、文字列変数には引用符が必要であることに注意してください。ローカル ストレージからデータを取得する場合は、getItem メソッドを使用できます。コードプロセス全体は次のとおりです:

JavaScript コード

コンテンツをクリップボードにコピーします

var

1. storage = window.localStorage; storage.name = “トム” ;
2. //名前データを取得
3. var name1 = storage.getItem(“name”);
4. アラート(名前1) Chrome ブラウザ コンソールでのこのコードの表示結果は、Tom を示すプロンプト ボックスです。この方法でデータを正しく保存および読み取りできたことがわかります。
5. これらの保存されたデータを削除したい場合は、removeItem メソッドを使用できます。上記のコードに次のコードを追加します:

JavaScript コード

コンテンツをクリップボードにコピーします

storage.removeItem(“名前”);

この時、再度アラートを出すとデータがクリアされているためnullが表示されます。

ローカル ストレージの基本的な使用法とアイデアを理解したら、ローカル ストレージを体系的に導入してみましょう。

ローカル ストレージは、次の 3 つの主要なカテゴリに分類されます: localStorage/sessionStorage/local database

localStorageとsessionStorageの使い方、機能、呼び出しメソッド等は同じです。意味が違うだけです。このうち、localStorage に保存されているデータは長期間有効ですが、sessionStorage に保存されている情報はセッションが終了するたびに破棄されます (平たく言えば、ページを閉じると自動的にデータが破棄されます)。

この 2 つの特性が異なるため、アプリケーションのシナリオも大きく異なります。通常、ユーザー設定項目やその他の長期間保存する必要があるデータ情報を保存する必要がある場合、その長期保存特性を利用して、localStorgae を使用して保存する必要があります。同様に、ショッピング カートなどのセッションベースの機能を実装する必要がある場合は、sessionStorage を使用する必要があります。

localStorage と sessionStorage の使い方は同じなので、localStorage を例にして 2 つの方法を紹介します。

1. データの設定 setItem
使用法は localStorage.setItem("key", "value") で、値を key に渡すことを意味します。 (sessionStorage.setItemの使用方法は同じなので、以下では一つ一つ紹介しません)

2. データの取得 getItem
使用法は、対応するキーの値を入力するだけで、そこから対応する値を取得できます。

3. 特定のデータを削除しますremoveItem
使用方法は、キーに対応するデータを削除する localStorage.removeItem(key) です。

4. すべてのデータをクリアします。clear
の使用法は、ストレージ システム内のすべてのデータをクリアすることを意味します。

上記は、sessionStorage/localStorage の最も基本的な使用法の一部です。皆さんの学習に役立つことを願っています。