Raid on HTML5 Javascript API Extension 3 — ローカル storage_html5 チュートリアル スキルの新しい体験

データをクライアントに保存する必要があるのはなぜですか?
クライアントにデータを保存すると、多くの問題が解決され、不必要なデータ送信が削減されます。
1. プログラムのステータスを保存できます。ユーザーは、ブラウザを閉じて開いた後、どこで作業していたかを知ることができます。それをまた。
2. データをキャッシュする機能: 変化しない大量のデータについて、毎回サーバーからデータを取得する必要はありません。
3. ユーザー設定を保存できる: この種のデータは通常、サーバーに保存する必要はありません。
以前のアプローチ
HTML5 ローカル ストレージが登場する前は、クライアントに永続的なデータを保存したい場合、いくつかのオプションがありました。
1. HTTP Cookie。 HTTP Cookie の欠点は明らかで、保存できるデータは 4KB までしかなく、各 HTTP リクエストは (SSL を使用しない限り) クリア テキストでサーバーに送信されます。
2. IE ユーザーデータ。 userData は、1990 年代のブラウザ戦争中に Microsoft が立ち上げたローカル ストレージ ソリューションで、DHTML の動作属性を使用して、各ページに最大 64K のデータを保存し、各サイトに最大 640K のデータを保存できます。 userData の欠点は明らかです。これは Web 標準の一部ではないため、アプリケーションが IE のみをサポートする必要がある場合を除き、ほとんど役に立ちません。
3. フラッシュクッキー。 Flash Cookie は、実際には HTTP Cookie と同じものではありません。おそらく、その名前は「Flash ローカル ストレージ」と呼ぶべきでしょう。Flash Cookie では、デフォルトで各 Web サイトに 100K を超えるデータしか保存できません。それを超えると、Flash は自動的に更新を要求します。 Flash の ExternalInterface インターフェイスを利用すると、JavaScript を通じて Flash のローカル ストレージを簡単に操作できます。 Flash の問題は、それが Flash であるということだけです。
4. Google Gears。 Gears は、Google が 2007 年にリリースしたオープンソースのブラウザ プラグインで、主要なブラウザの互換性を向上させることを目的としており、SQLite に基づく組み込み SQL データベースを備えており、ユーザーを取得した後にデータベースにアクセスするための統合 API を提供します。 Gears の問題は、Google 自体がそれを使用しなくなったことです。
目まぐるしく多様なテクノロジーは、ブラウザーの互換性の問題を引き起こします。おそらくここで誰もが最もよく使用するものは Cookie です。
HTML5 の新しいエクスペリエンス
上記の問題に対応して、HTML5 はより理想的なソリューションを提供します。保存する必要があるものが単なるキーと値のペアであれば、それを解決できるデータです。 Webストレージを利用することができます。
Cookie と比較すると、Web ストレージには次のように多くの利点があります:
1. より大きなストレージ スペース: IE8 ではそれぞれの独立したストレージ スペースは 10M で、他のブラウザーの実装は若干異なりますが、それよりもはるかに大きくなります。クッキーよりも。
2. 保存されたコンテンツはサーバーに送信されません。Cookie が設定されると、Cookie のコンテンツがリクエストとともにサーバーに送信されます。これは、ローカルに保存されたデータの帯域幅を無駄にします。 Web Storage 内のデータはローカルにのみ存在し、サーバーとは一切対話しません。
3. より豊富で使いやすいインターフェース: Web Storage は、より豊富なインターフェースを提供し、データ操作を容易にします。
4. 独立したストレージ スペース: 各ドメイン (サブドメインを含む) には独立したストレージ スペースがあるため、データが混乱することはありません。
Web ストレージの分類
Web ストレージは、実際には sessionStorage と localStorage の 2 つの部分で構成されます。
sessionStorage は、セッション内のデータをローカルに保存するために使用されます。これらのデータには、同じセッション内のページからのみアクセスでき、セッションが終了するとデータは破棄されます。したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。
LocalStorage は、データがアクティブに削除されない限り、永続的なローカル ストレージとして使用されます。
Web Storage がサポートされているかどうかを確認します
Web Storage はすべての主要なブラウザでサポートされていますが、古いブラウザとの互換性を確保するには、このテクノロジーが使用できるかどうかを確認する必要があります。
最初の方法: Storage オブジェクトが存在するかどうかを確認して、ブラウザが Web Storage をサポートしているかどうかを確認します:

コードをコピー

コードは次のとおりです:

if(typeof(Storage)!=="unknown"){
// はい! localStorage と sessionStorage のサポート
// 一部のコード。 ..
} else {
// 申し訳ありませんが、Web ストレージはサポートされていません。
}

2 番目の方法は、それぞれのオブジェクトを個別に確認することです。 localStorage がサポートするかどうか:

コードをコピーします

コードは次のとおりです:

if (typeof(localStorage) == '未定義' ) {
alert('お使いのブラウザは HTML5 localStorage をサポートしていません。アップグレードしてください。');
} else {
//はい! localStorage と sessionStorage をサポートしています!
// 一部のコード....
}
または:
if('localStorage' in window && window['localStorage'] !== null) {
// はい! localStorage と sessionStorage がサポートされています!
// 一部のコード....
} else {
alert('お使いのブラウザは HTML5 localStorage をサポートしていません。アップグレードしてください。') ;
}
または
if (!!localStorage) {
// はい! localStorage と sessionStorage のサポート!
} else {
alert('お使いのブラウザは HTML5 localStorage をサポートしていません。アップグレードしてみてください。');
}

明らかに、最初の方法が最も直接的で簡単です。

Web ストレージの使用法 Web ストレージはキーと値のペアを保存し、ブラウザはそれらを文字列として保存します。必要に応じて、忘れずに他の形式に変換してください。
用途が異なる場合を除き、sessionStorage と localStorage は同じメンバー リストを持ちます:

コードをコピーコードは次のとおりです。

key = value: キーと値のペアを格納
setItem(key, value): キーと値のペアを格納
getItem(key): キーと値のペアを取得
removeItem(key ): すべてのキーと値のペアを削除します
clear(): すべてのキーと値のペアを削除します
length: キーと値のペアの数

強調する必要がありますここに: setItem(key,value ) メソッドは理論的には任意の型にできますが、実際には、ブラウザーは value の toString メソッドを呼び出して文字列値を取得し、ローカルに保存します。そのため、カスタム型の場合は、次のように定義する必要があります。自分で意味のある toString メソッドを作成します。たとえば、次の例は JSON.stringify と組み合わせて使用​​されます。

コードをコピーしますコードは次のとおりです:

var person = {'name': 'rainman', 'age': 24};
localStorage.setItem("me", JSON.stringify(person)); >JSON.parse(localStorage.getItem( 'me')).name; // 'rainman'
/**
* JSON.stringify、JSON データを文字列に変換します
* JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred ", "年齢":24}'
* JSON.stringify(['a', 'b', 'c']) // '["a","b","c"]'
* JSON.parse、逆JSON.stringify
* JSON.parse('["a","b","c"]') // ["a","b","c" ]
*/


また、Key-Valueを追加する場合追加された数が比較的大きい場合は、ペアを比較します。安全な方法は、制限を超える例外があるかどうかを確認することです:

コードをコピーします コードは次のとおりです。

try {

localStorage.setItem(itemId,values.join(';'));
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert( 'クォータを超えました!');
}
}


Web Storage のメソッドは非常に簡単です。例では、ボタンのクリック数をカウントします:

コードをコピーコードは次のとおりです:

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

レポ：チームメイトを復活させる方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

3週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7338

9

Java チュートリアル

1627

14

CakePHP チュートリアル

1352

46

Laravel チュートリアル

1265

25

PHP チュートリアル

1210

29

もっと見る

Related knowledge

Vue プロジェクト開発におけるデータ キャッシュとローカル ストレージ エクスペリエンスの共有 Nov 03, 2023 am 09:15 AM

Vue プロジェクト開発におけるデータ キャッシュとローカル ストレージのエクスペリエンスの共有 Vue プロジェクトの開発プロセスでは、データ キャッシュとローカル ストレージは 2 つの非常に重要な概念です。データ キャッシュによりアプリケーションのパフォーマンスが向上し、ローカル ストレージによりデータの永続的なストレージが実現されます。この記事では、Vue プロジェクトでデータ キャッシュとローカル ストレージを使用する際の経験と実践方法をいくつか共有します。 1. データ キャッシュ データ キャッシュは、後ですぐに取得して使用できるように、データをメモリに保存することです。 Vue プロジェクトでは、一般的に使用される 2 つのデータ キャッシュ方法があります。

保存フォルダーはどこにありますか? Jan 12, 2021 pm 02:02 PM

保存フォルダーはファイル管理にあります。検索方法: 1. 携帯電話のデスクトップを直接開き、[システム ツール] をクリックして入力します。 2. ファイル管理を選択してジャンプします。 3. すべてのファイルを参照します。 4. ファイル内の保存フォルダーを検索します。管理。 。

Vue プロジェクトでデータをローカルに保存および管理する方法 Oct 08, 2023 pm 12:05 PM

Vue プロジェクトのデータのローカル ストレージと管理は非常に重要であり、ブラウザーが提供するローカル ストレージ API を使用して、データの永続的なストレージを実現できます。この記事では、データのローカル ストレージと管理のために Vue プロジェクトで localStorage を使用する方法を紹介し、具体的なコード例を示します。データの初期化 Vue プロジェクトでは、まずローカルに保存する必要があるデータを初期化する必要があります。 Vue コンポーネントの data オプションで初期データを定義し、作成されたフック関数を通じて作成されたかどうかを確認できます。

localstorage の主な用途を明らかにします。localstorage はどのような利便性をもたらしますか? Jan 13, 2024 pm 12:39 PM

localstorage の主な目的が明らかになりました。それはどのような利便性を提供するのでしょうか?最新の Web 開発では、フロントエンド開発者は多くの場合、ユーザーがページを閉じた後もデータの状態が維持されるように、データを保存する必要があります。この問題を解決するために、HTML5 ではローカルストレージという非常に便利な機能が導入されました。ユーザーのブラウザにデータを永続的に保存するAPIであり、開発者がフロントエンドに簡単にデータを保存できるように便利な操作インターフェースを提供します。それで、ロカ

データストレージ効率を向上させるためのローカルストレージの 5 つの異なる方法の比較分析 Jan 13, 2024 am 08:47 AM

データ ストレージ効率の向上: ローカル ストレージの 5 つの異なる方法の比較分析 はじめに: 今日の情報爆発の時代では、データのストレージと管理が特に重要になっています。 Web 開発では、さまざまなページやセッションで使用するためにデータを保存する必要があることがよくあります。広く使用されているデータ保存方法の 1 つは、ローカルストレージを使用することです。 Localstorage は、ブラウザ内にデータを永続的に保存できる HTML5 が提供するローカル ストレージ メカニズムです。それはキーに基づいています

uniapp実装でローカルストレージlocalStorageを使用する方法 Oct 21, 2023 am 09:36 AM

uniapp でローカル ストレージ localStorage を使用する方法には、特定のコード サンプルが必要です。モバイル アプリケーションを開発する場合、次回アプリケーションを開いたときにすぐに取得できるように、一部のデータをローカル ストレージに保存することが必要になることがよくあります。 uniapp では、localStorage を使用してローカル ストレージ機能を実装できます。この記事では、uniapp で localStorage を使用する方法と具体的なコード例を紹介します。 uniapp は、Vue.js に基づくクロスプラットフォーム開発のセットです

データ キャッシュとローカル ストレージに Vue を使用する方法 Aug 03, 2023 pm 02:33 PM

データ キャッシュとローカル ストレージに Vue を使用する方法 フロントエンド開発では、多くの場合、データ キャッシュとローカル ストレージを実行する必要があります。人気の JavaScript フレームワークとして、Vue はこれらの関数を実装するためのシンプルで使いやすいメソッドをいくつか提供しています。この記事では、データ キャッシュとローカル ストレージに Vue を使用する方法を紹介し、対応するコード例を示します。データ キャッシュ データ キャッシュとは、後続の操作中にすぐに取得できるように、データをメモリに保存することを指します。 Vue はグローバル データ キャッシュ オブジェクト $data を提供します。

SessionStorage の機能と利点を確認する Jan 11, 2024 pm 03:16 PM

SessionStorage の概要: その用途と利点を理解するには、具体的なコード例が必要です。 はじめに: Web 開発では、多くの場合、ユーザー情報と一時データを保存および管理する必要があります。この問題を解決するために、HTML5 では新しい API、SessionStorage が導入されました。この記事では、SessionStorage の概念、使用法、利点を紹介し、読者が SessionStorage をよりよく理解できるようにいくつかの具体的なコード例を示します。 1.セッションストレージとは何ですか?

See all articles