HTML5 Web ストレージ
クライアントへのデータ格納
HTML5は、クライアントへデータを格納するための2つの新しいオブジェクトを提供します:
- localStorage - タイムリミットなしでデータを格納する
- sessionStorage - 1セッションのデータを格納する
以前、これはクッキーを使用して行っていました。クッキーは、サーバに対するあらゆるリクエストで渡されるため、
非常に遅く、効果的でないので大量のデータには適していません。
HTML5では、データはすべてのサーバ要求に渡されるわけではなく、要求された時にのみ使用されます。
そのために、Web サイトのパフォーマンスに影響を与えることなく、大量のデータを格納することが可能になります。
データは、それぞれ別の Web サイトの領域に格納され、Web サイトは自サイトに保存されたデータにのみアクセスできます。
HTML5は、データの保存とアクセスには JavaScript を使用します。
localStorage オブジェクト
localStorage オブジェクトには、時間制限なしでデータが格納されます。
データは、翌日、翌週あるいは翌年でも使用できます。
localStorage の作成とアクセス方法:
例
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
Try it yourself »
次の例は、ユーザがページを訪問した回数をカウントします:
例
<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>
Try it yourself »
The sessionStorage オブジェクト
sessionStorage オブジェクトは、1 セッションのデータを保存します。
ユーザがブラウザウィンドウを閉じると、データは削除されます。
sessionStorageの作成とアクセス方法:
例
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
Try it yourself »
次の例は、ユーザが現在のセッションでページ訪問した回数をカウントします:
例
<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>
Try it yourself »
|