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 を例にします):

• データの保存: localStorage.setItem(key,value);

• データの読み取り: localStorage.getItem(key);

• 単一データの削除: localStorage.removeItem (key);

• すべてのデータを削除します: localStorage.clear();

• 特定のインデックスのキーを取得します: localStorage.key(index);

ヒント: 通常、キーと値のペアは保存されます文字列として使用できます。形式を変換する必要があります。

次の例は、ユーザーがボタンをクリックした回数を示しています。

コード内の文字列値は数値型に変換されます。

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 + " 次 ";

上記は概要です。

【関連する推奨事項】

HTML ファイルとは何ですか? HTML5 の機能、利点、欠点は何ですか?

以上がHTML5 における Web とは何ですか? Webストレージの要素は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。