HTML5 Webストレージの詳細説明-H5 チュートリアル-php.cn

HTML5 Webストレージの詳細説明

高洛峰

リリース： 2017-02-10 10:42:00

オリジナル

1924 人が閲覧しました

クライアント側でのデータの保存

HTML5 は、クライアント側でデータを保存する 2 つの新しい方法を提供します:

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

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

以前は、これらは完了しましたクッキーによって。ただし、Cookie はリクエストごとにサーバーに渡されるため、速度が遅く非効率的になるため、大量のデータを保存するのには適していません。

HTML5 では、サーバーリクエストごとにデータが渡されるわけではなく、データはリクエストされた場合にのみ使用されます。 Web サイトのパフォーマンスに影響を与えることなく、大量のデータを保存できます。

Web サイトごとにデータは異なる領域に保存され、Web サイトは独自のデータのみにアクセスできます。

HTML5 は JavaScript を使用してデータを保存し、データにアクセスします。

localStorage メソッド

localStorage メソッドによって保存されるデータには時間制限がありません。データは翌日、翌日、または翌日以降も利用できます。

localStorage を作成してアクセスする方法:

<!DOCTYPE HTML>  
<html>  
<body>  
  
<script type="text/javascript">  
  
localStorage.lastname="Smith";   
document.write("Last name: " + localStorage.lastname);   
  
</script>  
  
</body>  
</html>

ログイン後にコピー

次の例では、ユーザーがページにアクセスした回数をカウントします。

<!DOCTYPE HTML>  
<html>  
<body>  
  
<script type="text/javascript">  
  
if (localStorage.pagecount)   
    {   
    localStorage.pagecount=Number(localStorage.pagecount) +1;   
    }   
else   
    {   
    localStorage.pagecount=1;   
    }   
document.write("Visits: " + localStorage.pagecount + " time(s).");   
  
</script>    
  
<p>刷新页面会看到计数器在增长。</p>  
  
<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>  
  
</body>  
</html>

ログイン後にコピー

sessionStorage メソッド

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

セッションの作成とアクセス方法ストレージ:

<!DOCTYPE HTML>   
<html>   
<body>   
  
<script type="text/javascript">   
  
sessionStorage.lastname="Smith";   
document.write(sessionStorage.lastname);   
  
</script>   
  
</body>   
</html>

ログイン後にコピー

次の例は、現在のセッションでユーザーがページにアクセスした回数をカウントします:

<!DOCTYPE HTML>  
<html>  
<body>  
  
<script type="text/javascript">  
  
if (sessionStorage.pagecount)   
    {   
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;   
    }   
else   
    {   
    sessionStorage.pagecount=1;   
    }   
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");   
  
</script>    
  
<p>刷新页面会看到计数器在增长。</p>  
  
<p>请关闭浏览器窗口，然后再试一次，计数器已经重置了。</p>  
  
</body>  
</html>

ログイン後にコピー

上記の HTML5 Web ストレージの詳細な説明は、エディターによって共有されるすべてのコンテンツです。参考にしていただければ幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

HTML5 Web ストレージの詳細に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。