HTML 5 Webストレージ-sessionStorageとlocalStorage
2755 ワード
HTML 5は、クライアントにデータを格納する2つの新しい方法を提供します. localStorage-時間制限のないデータストレージ sessionStorage-1つのsessionに対するデータストレージ sessionStorageは、同じセッション内のページにのみアクセスでき、セッションが終了するとデータも破棄されるセッション内のデータをローカルに格納するために使用されます.したがって、sessionStorageは永続的なローカルストレージではなく、セッションレベルのストレージにすぎません.
localStorageは、アクティブにデータを削除しない限り、永続的なローカルストレージに使用されます.データは期限切れになりません.
web storageとクッキーの違い
Web Storageの概念はクッキーと似ていますが、違いは、より大きな容量のストレージのために設計されていることです.
Cookieのサイズは制限されており、新しいページを要求するたびにCookieが送信されます.これにより、帯域幅が無形に浪費されます.また、cookieは役割ドメインを指定する必要があります.ドメイン間で呼び出すことはできません.
このほか、Web StorageにはsettItem、getItem、removeItem、clearなどの方法があり、クッキーのようにフロントエンド開発者がsetCookie、getCookieを自分でカプセル化する必要はありません.
ただし、Cookieも欠かせません.Cookieの役割はサーバとのインタラクションであり、HTTP仕様の一部として存在しますが、Web Storageはローカルでデータを「格納」するためだけに生成されます(@otakustayからの修正)
html 5 web storageのブラウザサポート状況
ブラウザのサポートはIE 7以下がサポートされていないほか、他の標準ブラウザは完全にサポートされている(ieおよびFFはwebサーバで実行する必要がある).IEはいつも良いことをしている.例えば、IE 7、IE 6のUserDataはjavascriptローカルストレージのソリューションである.簡単なコードパッケージにより、すべてのブラウザがweb storageをサポートするように統一できます.
ブラウザがlocalStorageをサポートしているかどうかを判断するには、次のコードを使用します.
localStorageおよびsessionStorageアクション
localStorageとsessionStorageは、setItem、getItem、removeItemなど、同じ操作方法を有します.
setItem格納value
getItem valueの取得
removeItem削除key
クリアすべてのkey/valueをクリア
その他の操作方法:ポイント操作と[]
web Storageは、自身のsetItem、getItemなどでアクセスしやすいだけでなく、普通のオブジェクトのようにポイント(.)を使うこともできます.オペレータ、および[]は、次のコードのようにデータを格納します.
storageイベント
storageはstorageイベントも提供し、キー値が変更されたりclearされたりすると、storageイベントをトリガーすることができます.次のコードのようにstorageイベントの変更のリスニングが追加されます.
localStorageは、アクティブにデータを削除しない限り、永続的なローカルストレージに使用されます.データは期限切れになりません.
web storageとクッキーの違い
Web Storageの概念はクッキーと似ていますが、違いは、より大きな容量のストレージのために設計されていることです.
Cookieのサイズは制限されており、新しいページを要求するたびにCookieが送信されます.これにより、帯域幅が無形に浪費されます.また、cookieは役割ドメインを指定する必要があります.ドメイン間で呼び出すことはできません.
このほか、Web StorageにはsettItem、getItem、removeItem、clearなどの方法があり、クッキーのようにフロントエンド開発者がsetCookie、getCookieを自分でカプセル化する必要はありません.
ただし、Cookieも欠かせません.Cookieの役割はサーバとのインタラクションであり、HTTP仕様の一部として存在しますが、Web Storageはローカルでデータを「格納」するためだけに生成されます(@otakustayからの修正)
html 5 web storageのブラウザサポート状況
ブラウザのサポートはIE 7以下がサポートされていないほか、他の標準ブラウザは完全にサポートされている(ieおよびFFはwebサーバで実行する必要がある).IEはいつも良いことをしている.例えば、IE 7、IE 6のUserDataはjavascriptローカルストレージのソリューションである.簡単なコードパッケージにより、すべてのブラウザがweb storageをサポートするように統一できます.
ブラウザがlocalStorageをサポートしているかどうかを判断するには、次のコードを使用します.
if(window.localStorage){
alert(" localStorage")
}else{
alert(" localStorage")
}
//
if(typeof window.localStorage == 'undefined'){
alert(" localStorage")
}
localStorageおよびsessionStorageアクション
localStorageとsessionStorageは、setItem、getItem、removeItemなど、同じ操作方法を有します.
setItem格納value
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");
getItem valueの取得
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");
removeItem削除key
sessionStorage.removeItem("key");
localStorage.removeItem("site");
クリアすべてのkey/valueをクリア
sessionStorage.clear();
localStorage.clear();
その他の操作方法:ポイント操作と[]
web Storageは、自身のsetItem、getItemなどでアクセスしやすいだけでなく、普通のオブジェクトのようにポイント(.)を使うこともできます.オペレータ、および[]は、次のコードのようにデータを格納します.
var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
storageイベント
storageはstorageイベントも提供し、キー値が変更されたりclearされたりすると、storageイベントをトリガーすることができます.次のコードのようにstorageイベントの変更のリスニングが追加されます.
if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){e=window.event;}
}