ホームページ > 記事 > ウェブフロントエンド > HTML5 における Web とは何ですか? Webストレージの要素は何ですか?
HTML5 Web ストレージ。Cookie よりも優れたローカル ストレージ方法です。この記事では、HTML5 Web ストレージの意味と要素解析について紹介します。
HTML5 Web Storage とは何ですか?
HTML5 を使用すると、ユーザーの閲覧データをローカルに保存できます。
以前は、ローカル ストレージで Cookie が使用されていました。ただし、Web ストレージはより安全で高速である必要があります。これらのデータはサーバーに保存されませんが、ユーザーが Web サイトのデータを要求した場合にのみ使用され、Web サイトのパフォーマンスに影響を与えることなく大量のデータを保存することもできます。
データ キーと値のペアとして存在する Web ページのデータは、Web ページによるアクセスと使用のみが許可されます。クライアントにデータを保存するために使用される 2 つのオブジェクトは次のとおりです:
localStorage - Web サイト全体のデータを長期間保存するために使用されます。保存されたデータには、手動で削除されるまで有効期限がありません。
sessionStorage - 同じウィンドウ(またはタブ)のデータを一時的に保存するために使用されます。データはウィンドウまたはタブを閉じると削除されます。
Web ストレージを使用する前に、ブラウザが localStorage と sessionStorage をサポートしているかどうかを確認する必要があります:if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... } else { // 抱歉! 不支持 web 存储。 }localStorage 对象localStorage オブジェクトによって保存されるデータには時間制限がありません。データは翌日、翌週、または翌年以降も利用できます。
localStorage.sitename="PHP中文网教程"; document.getElementById("result").innerHTML="网站名:" + localStorage.sitename;分析例: key="sitename" と value="Rookie Tutorial" を使用して、localStorage のキーと値のペアを作成します。 キー「sitename」で値を取得し、id=「result」の要素にデータを挿入します。 上記の例は次のように書くこともできます:
// 存储 localStorage.sitename = "PHP中文网教程"; // 查找 document.getElementById("result").innerHTML = localStorage.sitename;localStorageの""sitename"を削除:
localStorage.removeItem(""sitename");localStorageでもsessionStorageでも使用できるAPIは同じで、よく使われるAPIは以下の通りです。次のとおりです (localStorage を例にします):
if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
sessionStorage オブジェクト
sessionStorage メソッドは、セッションのデータを保存します。ユーザーがブラウザ ウィンドウを閉じると、データは削除されます。
sessionStorage の作成方法とアクセス方法:
例
if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
上記は概要です。
【関連する推奨事項】以上がHTML5 における Web とは何ですか? Webストレージの要素は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。