Web Storage:シンプルで強力なクライアントデータストレージ技術
10258 ワード
Javascriptの使用がますます複雑になり、新しい標準と技術が誕生するにつれて、Webアプリケーションは毎日驚くべき進歩を遂げています.同時に、これらのWebアプリケーションへの依存性も増加し、それらの多くは私たちの日常生活の一部になっています.Webアプリケーション開発の不足の一つとして,クライアントにデータを格納する能力が知られており,これまでHTML 5規格や関連技術の成熟に伴い,本質的な変化が生じてきた.Web StorageはW 3 C仕様であり、クライアントでのストレージ数を提供する
クライアントストレージの現状
Javascriptの使用がますます複雑になり、新しい標準と技術が誕生するにつれて、Webアプリケーションは毎日驚くべき進歩を遂げています.同時に、これらのWebアプリケーションへの依存性も増加し、それらの多くは私たちの日常生活の一部になっています.Webアプリケーション開発の不足の一つとして,クライアントにデータを格納する能力が知られており,これまでHTML 5規格や関連技術の成熟に伴い,本質的な変化が生じてきた.
Web StorageはW 3 C仕様であり、セッションが終了するまでデータを保持したり、より長く保存したりすることができるクライアントにデータを格納する機能を提供しています.Web Storageは従来のcookiesよりも強力で使いやすく、これに基づいて展開し、使い方を学びます.
クライアントストレージの現状
Web Storageに進む前に、現在のクライアント・データ・ストレージのテクノロジー-cookies-にどのような問題があるかを簡単に振り返ってみましょう.
容量が小さい:Cookiesが許容できる最大ストレージは4 KBで、複雑なデータを保存するのに適していません.cookiesでは、複数の異なるウィンドウまたはラベル間で発生するトランザクションなど、同じサイトでマルチトランザクションと連絡を取るのは容易ではありません.Cookiesはクロスステーションスクリプトなどの技術で利用でき、結果的にセキュリティを破壊する可能性があります.
クエリー文字列にデータを格納する、フォームドメインを非表示にする、Flashベースのローカルストレージなどのcookiesの代替技術もあります.これらの技術は、セキュリティ、使用の利便性、容量制約の面で多かれ少なかれ問題があります.そのため、これまでクライアントにデータを格納するために悪い方法を使ってきましたが、より良い方法が必要で、Web Storageが誕生しました.
Web Storage
W 3 C Web Storage仕様は、Session StorageとLocal Storageの2つの異なるストレージタイプを含むクライアントにデータを格納するより良い方法を定義します.
Session StorageでもLocal Storageでも、同じドメインに5 MBのデータを格納することができます.これはcookiesよりも明らかなメリットがあります.次に、ストレージメカニズムについて詳しく説明します.
Session Storage
Session Storageの目的は、現在のセッションのすべてのデータを格納し、ウィンドウまたはラベルを閉じるとすぐにデータを破棄することです.
データの保存と取得
Session Storageにキー値ペア(key value pair)データを格納できます.コードを1行書くだけです.
データを取得するには、次のように書くことができます.
1行の簡単な文でSession Storageにデータを格納します.
ここでキーは1ですが、これはSession Storageの最初の値ではありません.値1を文字列「1」に変換して使用します.対応する値は最初の場所に保存されません.
先ほど保存したデータを取得してポップアップします.
別のsetItem()の例:
次に、次のように取得できます.
データの削除とクリア
Session Storageには、Storageリストからデータを削除および空にする方法もあります.removeItem()は、Storageリストからデータを削除するために使用されます.
データ・アイテムのkeyに転送して、対応するストレージ・データを削除することもできます.
clear()メソッドは、リスト全体のすべてのデータを空にするために使用されます.
また、lengthプロパティを使用して、Storageに格納されているキー値ペアの数を取得できます.
Local Storage
Local Storageは、クライアントに長時間のデータを格納するために使用され、簡単な例として、あるユーザーがページにアクセスした回数を記録するために使用されます.ページがLocal Storageで保存され、閉じて再度開くと、以前に保存されていたデータは依然として存在します.
Local Storageに保存されているデータを保存して取得します.Session Storageとよく似ています.setItem()とgetItem()という名前のメソッドも使用します.Local Storageにデータを保存するには、次のように書きます.
次のように取得できます.
同様に、Local Storageはlengthプロパティ、removeItem()、clear()をサポートします.
Session StorageとLocal Storageの場合、clear()関数の目的は同じです.リスト内のデータを空にするために使用されます.これは、localStorageなどのデータが呼び出されると、clear()関数が呼び出されることを意味します.clear()は、同じソースのローカルストレージデータをすべて削除するので、www.csserのようにすべてのLocal Storageデータが空になります.com、www.csser.com:80、www.csser.com/category/share/、www.csser.com/category/dev/などですが、staticのようです.csser.comに格納されているデータは影響を受けません.Session Storageでは、現在のセッションに格納されているデータのみが空になります.
storageイベントの使用
仕様はstorageイベント(storage event)を同時に提供し、ストレージ領域が変更されるとトリガーされます.これには、多くの有用なプロパティが含まれています.
storageArea:ストレージタイプ(SessionまたはLocal)keyを表す:変更が発生したkeyoldValue:keyの元の値newValue:keyの新しい値url:key変更が発生したURL
clear()メソッドを呼び出すと、key、oldValue、newValueがnullに設定されます.
注意事項
≪同一ソース・ストレージ｜Same Source Storage｜oem_src≫:プロトコル/ホスト名/ポートのセット(またはグローバル一意のフラグ)が完全に同じであることを示す、共有ストレージ領域.例:http://www.csser.comおよびhttp://static.csser.com2つの異なるソースです.
ストレージ制限:これまでほとんどのブラウザでWeb Storageが実装されており、ドメインごとに5 MBのデータを格納することが制限されています.
セキュリティの問題:Storageは各ソースに基づいて割り当てられており、不速なお客様はDNS偽装を利用してユーザーマシンに格納されているstorage領域データへのアクセス権を取得する可能性があります.このようなことを避けるために、SSLテクノロジーを使用することを考慮することができます.そのため、ユーザーは同じドメイン名からアクセスしていると確信することができます.
いつ適用されないか:異なるユーザーが同じドメイン名の異なるパスを使用する場合、ソース全体のストレージ領域と互いに格納されているデータにアクセスできます.無料ホストを使用するユーザーに対して、サイトは同じドメイン名で異なるディレクトリの形式でStorageを使用しないでください.
最後に、Web StorageはHTML 5仕様の一部ではなく、独立した仕様であることを示す必要があります.
クライアントストレージの現状
Javascriptの使用がますます複雑になり、新しい標準と技術が誕生するにつれて、Webアプリケーションは毎日驚くべき進歩を遂げています.同時に、これらのWebアプリケーションへの依存性も増加し、それらの多くは私たちの日常生活の一部になっています.Webアプリケーション開発の不足の一つとして,クライアントにデータを格納する能力が知られており,これまでHTML 5規格や関連技術の成熟に伴い,本質的な変化が生じてきた.
Web StorageはW 3 C仕様であり、セッションが終了するまでデータを保持したり、より長く保存したりすることができるクライアントにデータを格納する機能を提供しています.Web Storageは従来のcookiesよりも強力で使いやすく、これに基づいて展開し、使い方を学びます.
クライアントストレージの現状
Web Storageに進む前に、現在のクライアント・データ・ストレージのテクノロジー-cookies-にどのような問題があるかを簡単に振り返ってみましょう.
容量が小さい:Cookiesが許容できる最大ストレージは4 KBで、複雑なデータを保存するのに適していません.cookiesでは、複数の異なるウィンドウまたはラベル間で発生するトランザクションなど、同じサイトでマルチトランザクションと連絡を取るのは容易ではありません.Cookiesはクロスステーションスクリプトなどの技術で利用でき、結果的にセキュリティを破壊する可能性があります.
クエリー文字列にデータを格納する、フォームドメインを非表示にする、Flashベースのローカルストレージなどのcookiesの代替技術もあります.これらの技術は、セキュリティ、使用の利便性、容量制約の面で多かれ少なかれ問題があります.そのため、これまでクライアントにデータを格納するために悪い方法を使ってきましたが、より良い方法が必要で、Web Storageが誕生しました.
Web Storage
W 3 C Web Storage仕様は、Session StorageとLocal Storageの2つの異なるストレージタイプを含むクライアントにデータを格納するより良い方法を定義します.
Session StorageでもLocal Storageでも、同じドメインに5 MBのデータを格納することができます.これはcookiesよりも明らかなメリットがあります.次に、ストレージメカニズムについて詳しく説明します.
Session Storage
Session Storageの目的は、現在のセッションのすべてのデータを格納し、ウィンドウまたはラベルを閉じるとすぐにデータを破棄することです.
データの保存と取得
Session Storageにキー値ペア(key value pair)データを格納できます.コードを1行書くだけです.
sessionStorage.setItem(yourkey, yourvalue);データを取得するには、次のように書くことができます.
var item = sessionStorage.getItem(yourkey);1行の簡単な文でSession Storageにデータを格納します.
sessionStorage.setItem(1, 'The data is stored from csser.com');ここでキーは1ですが、これはSession Storageの最初の値ではありません.値1を文字列「1」に変換して使用します.対応する値は最初の場所に保存されません.
先ほど保存したデータを取得してポップアップします.
var csser = sessionStorage.getItem(1);
alert(csser);別のsetItem()の例:
sessionStorage.setItem('name', 'CSSer');次に、次のように取得できます.
var name = sessionStorage.getItem('name'); // CSSerデータの削除とクリア
Session Storageには、Storageリストからデータを削除および空にする方法もあります.removeItem()は、Storageリストからデータを削除するために使用されます.
var item = sessionStorage.removeItem(yourkey);データ・アイテムのkeyに転送して、対応するストレージ・データを削除することもできます.
var items = sessionStorage.removeItem(1);clear()メソッドは、リスト全体のすべてのデータを空にするために使用されます.
sessionStorage.clear();また、lengthプロパティを使用して、Storageに格納されているキー値ペアの数を取得できます.
var no_of_items = sessionStorage.length;Local Storage
Local Storageは、クライアントに長時間のデータを格納するために使用され、簡単な例として、あるユーザーがページにアクセスした回数を記録するために使用されます.ページがLocal Storageで保存され、閉じて再度開くと、以前に保存されていたデータは依然として存在します.
Local Storageに保存されているデータを保存して取得します.Session Storageとよく似ています.setItem()とgetItem()という名前のメソッドも使用します.Local Storageにデータを保存するには、次のように書きます.
localStorage.setItem(1, 'The data is stored local from csser.com');次のように取得できます.
var data = localStorage.getItem(1);同様に、Local Storageはlengthプロパティ、removeItem()、clear()をサポートします.
Session StorageとLocal Storageの場合、clear()関数の目的は同じです.リスト内のデータを空にするために使用されます.これは、localStorageなどのデータが呼び出されると、clear()関数が呼び出されることを意味します.clear()は、同じソースのローカルストレージデータをすべて削除するので、www.csserのようにすべてのLocal Storageデータが空になります.com、www.csser.com:80、www.csser.com/category/share/、www.csser.com/category/dev/などですが、staticのようです.csser.comに格納されているデータは影響を受けません.Session Storageでは、現在のセッションに格納されているデータのみが空になります.
storageイベントの使用
仕様はstorageイベント(storage event)を同時に提供し、ストレージ領域が変更されるとトリガーされます.これには、多くの有用なプロパティが含まれています.
storageArea:ストレージタイプ(SessionまたはLocal)keyを表す:変更が発生したkeyoldValue:keyの元の値newValue:keyの新しい値url:key変更が発生したURL
clear()メソッドを呼び出すと、key、oldValue、newValueがnullに設定されます.
注意事項
≪同一ソース・ストレージ｜Same Source Storage｜oem_src≫:プロトコル/ホスト名/ポートのセット(またはグローバル一意のフラグ)が完全に同じであることを示す、共有ストレージ領域.例:http://www.csser.comおよびhttp://static.csser.com2つの異なるソースです.
ストレージ制限:これまでほとんどのブラウザでWeb Storageが実装されており、ドメインごとに5 MBのデータを格納することが制限されています.
セキュリティの問題:Storageは各ソースに基づいて割り当てられており、不速なお客様はDNS偽装を利用してユーザーマシンに格納されているstorage領域データへのアクセス権を取得する可能性があります.このようなことを避けるために、SSLテクノロジーを使用することを考慮することができます.そのため、ユーザーは同じドメイン名からアクセスしていると確信することができます.
いつ適用されないか:異なるユーザーが同じドメイン名の異なるパスを使用する場合、ソース全体のストレージ領域と互いに格納されているデータにアクセスできます.無料ホストを使用するユーザーに対して、サイトは同じドメイン名で異なるディレクトリの形式でStorageを使用しないでください.
最後に、Web StorageはHTML 5仕様の一部ではなく、独立した仕様であることを示す必要があります.