HTML5ウェブストレージ


HTML5 Web ストレージ。Cookie よりも優れたローカル ストレージ方法です。

HTML5 Web Storage とは何ですか?

HTML5 を使用すると、ユーザーの閲覧データをローカルに保存できます。

以前は、ローカル ストレージで Cookie が使用されていました。ただし、Web ストレージはより安全で高速である必要があります。これらのデータはサーバーに保存されませんが、ユーザーが Web サイトのデータを要求した場合にのみ使用され、Web サイトのパフォーマンスに影響を与えることなく大量のデータを保存することもできます。

データ キーと値のペアとして存在する Web ページのデータは、Web ページによるアクセスと使用のみが許可されます。

ブラウザのサポート

Internet Explorer

Internet Explorer 8 以降、Firefox、Opera、Chrome、Safari は Web ストレージをサポートします。

注: Internet Explorer 7 以前の IE バージョンは Web ストレージをサポートしていません

localStorage と sessionStorage

クライアントにデータを保存するための 2 つの新しいオブジェクトがあります:

  • localStorage - 時間制限のないデータ ストレージ

  • sessionStorage - セッションのデータストレージ

Web ストレージを使用する前に、ブラウザが localStorage と sessionStorage をサポートしているかどうかを確認する必要があります:

if(typeof(Storage)!=="unknown")
{
// はい！ localStorage と sessionStorage のサポート!
//
コード.... }
else
{
// ウェブがありません。 storage support..
}


localStorage オブジェクト

localStorage オブジェクトによって保存されるデータには時間制限がありません。データは翌日、翌週、または翌日以降も利用できます。

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
  {
  localStorage.lastname="Smith";
  document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
</script>

</body>
</html>

インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

インスタンス分析:

  • key="lastname" と value="Smith" を使用して、 localStorage のキー/値のペアを作成します

  • キー "lastname" で値を取得し、id="result" を使用して要素にデータを挿入します

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

以下の例は、ユーザーがボタンをクリックした回数を示しています。 コード内の文字列値を数値型に変換します:

インスタンス

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (localStorage.clickcount)
    {
    localStorage.clickcount=Number(localStorage.clickcount)+1;
    }
  else
    {
    localStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

インスタンスの実行 »「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します


sessionStorage オブジェクト

sessionStorage メソッドは、セッションのデータを保存します。ユーザーがブラウザ ウィンドウを閉じると、データは削除されます。

セッションを作成してアクセスする方法Storage::

インスタンス

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (sessionStorage.clickcount)
    {
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
    }
  else
    {
    sessionStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します


←
→