HTML - ウェブストレージ：クライアントサイドデータストレージの扉

こんにちは、未来のウェブ開発者たち！今日は、HTMLウェブストレージの世界に興味深く飛び込みましょう。あなたの近所の親切なコンピュータ教師として、私はこの現代ウェブ開発の重要な側面を案内するのを嬉しく思っています。お気に入りの飲み物を手に取り、リラックスして、一緒に潜りましょう！

HTML - Web Storage

ウェブストレージとは？

本題に入る前に、まずウェブストレージとは何かを理解しましょう。想象してほしいのですが、あなたがツリーハウスを建てて、道具を保管する場所が必要な時を考えてください。ウェブストレージは、そのツリーハウスの中の隠された部分で、後で使うために重要な情報を保管する場所です。ウェブ開発用語では、クライアントサイド（ユーザーのブラウザ）にデータを保存する方法で、クッキーを使うことなく行います。

ウェブストレージの種類

さて、ウェブストレージの主要な2種類を見てみましょう：

セッションストレージ
ローカルストレージ

これらは、ツリーハウスの中の違う引き出しのように考えられ、似たような目的を持っていますが、いくつかの重要な違いがあります。それぞれを詳しく説明しましょう：

セッションストレージ

セッションストレージは、一時的なメモ帳のようなものです。1回のセッションにデータを保存し、ブラウザタブやウィンドウを閉じると、データは魔法のように消えます。

ローカルストレージ

一方、ローカルストレージは日記のようなものです。ここに書いた情報は、ブラウザを閉じても残り、あなたが戻ってきたときに待っています。まるで、ベッドサイドの信頼できる日記のように。

HTMLウェブストレージの例

それでは、手を_dirtyにしてコードに取り組んでみましょう！まずセッションストレージから始め、その後ローカルストレージに移ります。

セッションストレージの例

<!DOCTYPE html>
<html>
<head>
<title>セッションストレージの楽しみ</title>
</head>
<body>
<h1>セッションストレージパーティへようこそ！</h1>
<button onclick="saveData()">私の名前を保存</button>
<button onclick="loadData()">私の名前は何ですか？</button>

<script>
function saveData() {
sessionStorage.setItem("userName", "アリス");
alert("名前を保存しました！");
}

function loadData() {
var name = sessionStorage.getItem("userName");
if (name) {
alert("あなたの名前は " + name + " です");
} else {
alert("あなたの名前はまだわかりません！");
}
}
</script>
</body>
</html>

これを分解してみましょう：

保存ボタンと読み取りボタンが2つあります。
saveData() 関数は sessionStorage.setItem() を使って名前「アリス」を保存します。
loadData() 関数は sessionStorage.getItem() を使って保存された名前を取得します。
タブを閉じて再開すると、名前は消えます。これがセッションストレージです！

ローカルストレージの例

次に、例をローカルストレージに修正してみましょう：

<!DOCTYPE html>
<html>
<head>
<title>ローカルストレージの冒険</title>
</head>
<body>
<h1>ローカルストレージの王国へようこそ！</h1>
<button onclick="saveData()">私のお気に入りの色を覚えて</button>
<button onclick="loadData()">私のお気に入りの色は何ですか？</button>

<script>
function saveData() {
localStorage.setItem("favoriteColor", "青");
alert("色を保存しました！");
}

function loadData() {
var color = localStorage.getItem("favoriteColor");
if (color) {
alert("あなたのお気に入りの色は " + color + " です");
} else {
alert("あなたのお気に入りの色はまだ教えてくれていません！");
}
}
</script>
</body>
</html>

構造は似ていますが、localStorage を使っていることに注意してください。違いは、ブラウザを閉じてコーヒーブレイクをし、戻ってきたときにあなたのお気に入りの色がまだあります！

ウェブストレージの削除

さて、ストレージを片付ける場合どうしますか？ウェブアプリの春掃除のようなものです！以下のように行います：

// 特定のアイテムを削除
sessionStorage.removeItem("userName");
localStorage.removeItem("favoriteColor");

// すべてのアイテムを削除
sessionStorage.clear();
localStorage.clear();

ウェブストレージメソッド

学んだメソッドを整理した表を見てみましょう：

メソッド	説明
setItem(key, value)	キー/値のペアをストレージに追加
getItem(key)	キーを使って値を取得
removeItem(key)	キーを使ってアイテムを削除
clear()	ストレージからすべてのアイテムを削除

ウェブストレージを選ぶ理由

さて、あなたは思うかもしれません、「クッキーがあるのに、なぜウェブストレージを使う必要があるの？」素晴らしい質問です！いくつかの説得力のある理由をあげます：

容量：ウェブストレージはクッキーよりも遥かに多くのデータを保持できます。小さな箱から広いクローゼットへのアップグレードのようなものです！
セキュリティ：ウェブストレージのデータは、クッキーとは異なり、すべてのHTTPリクエストとともに送信されません。家に日記を置いて、それを持ち歩かないようなものです。
使いやすさ：ウェブストレージはシンプルで直感的なAPIを持っています。現代のスマートフォンを使うようなものです。
パフォーマンス：データをローカルに保存することで、ウェブアプリが速くなります。教室の備品を保管するクローゼットを持つことと、保管室に何度も走ることの違いです。

結論

そして、ここまでがHTMLウェブストレージの旅です。一時的なセッションストレージから、永続的なローカルストレージまで、データの保存、取得、削除方法を学びました。また、ウェブストレージがクッキーよりも優れている理由も説明しました。

忘れないでください、強力なツールを使う場合は、注意深く使うことです。パスワードやクレジットカード番号などの敏感情報を保存しないでください。ユーザーエクスペリエンスを向上させるため、そして、フォートノックスを守るためではありません！

ウェブ開発の冒険を続ける中で、ウェブストレージを使う創造的な方法をいくつも見つけるでしょう。ユーザーの設定を覚えたり、ゲームの進行状況を保存したり、オフラインデータを保管したりするなど、可能性はあなたの想像力に限界があります！

それでは、実験を続け、ユーザーに優しく、パフォーマンスの高いウェブアプリを作成してください。未来のウェブ魔法使い、幸せなコーディングを！

Credits: Image by storyset

前のチュートリアル:

HTML - WebSocket

次のチュートリアル:

HTML - サーバーから送信されるイベント