このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第40回

サーバー不要で保存できる「Web Storage」の使い方

2010年09月28日 10時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
iphone-android

 HTML5とともにW3Cで標準化が進められているDOM APIの1つに「Web Storage」があります。Web StorageはCookieと同様にローカルディスク上にデータを保存する機能で、Cookieに比べて「有効期限がない」「データサイズの制限がない」といった特徴があります。ローカル上に永続的にデータを保存できるので、フォームの入力内容の保存やゲームのプレイ履歴の記録、各種サービスの状態保存など、などさまざまな用途に利用できます。

 Web Storageにはローカルストレージとセッションストレージがあり、永続的にデータを保存する場合はローカルストレージを、ブラウザーを開いている間の一時的な保存であればセッションストレージを使います。ローカルストレージ、セッションストレージとも同じメソッドを持ち、記述方法に違いはありません。

 今回のJavaScriptラボは、HTMLフォームに入力した内容を自動的に保存/読み込むサンプルを作りながら、Web Storageの使い方を解説します。また、応用編として、本連載で以前に作成した「シンプルペイント」(HTML5 Canvasを使ったお絵かきスクリプト)を拡張し、ペンの色やサイズなどの状態を保存する機能を作成します。どちらも永続的にデータをローカルディスクに保存するので、ローカルストレージを使います。

書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。

HTML5+JavaScript アイデア&実践サンプル

本体 2,800+税、B5変形判312ページ(オール4色刷)
ISBN:978-4-04-870448-9

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング