JavaScript - ストレージAPI：初めてのガイド

こんにちは、未来のプログラミングスーパースターたち！? 今日は、JavaScriptのストレージAPIの世界に飛び込みます。これまで一度もコードを書いたことがない人も心配しないでください - このエキサイティングな旅であなたの親切なガイドとなります。では、始めましょう！

JavaScript - Storage API

Web Storage APIとは？

あなたが魔法のノートブックを持っていて、それを閉じても覚えておいてくれるようなものを想像してみてください。それは、Web Storage APIがウェブサイトにとってやっていることです！ウェブアプリケーションがブラウザ内にデータを直接保存する方法です。

これをこんな風に考えてみてください：ウェブサイトでゲームをプレイしていて、進捗を保存したいとします。Web Storage APIにより、ゲームがあなたのスコアを覚え、ブラウザを閉じて後日戻ってきたときでも保存されたままです。すごいですね？

ウェブストレージには主に2つの種類があります：

localStorage
sessionStorage

これらの詳細を見ていきましょう。

Window localStorageオブジェクト

localStorageとは？

localStorageは、ウェブアプリケーションの永続的なストレージロッカーのようなものです。ブラウザを閉じてもデータを保持しますので、長期保存に最適です。

localStorageの使い方

以下にlocalStorageの使い方の簡単な例を示します：

// データの保存
localStorage.setItem("username", "CoolCoder123");

// データの取得
let savedUsername = localStorage.getItem("username");
console.log(savedUsername); // 出力: CoolCoder123

// データの削除
localStorage.removeItem("username");

// 全データのクリア
localStorage.clear();

この例では、ユーザー名を保存し、取得し、削除し、すべてのデータをクリアしています。魔法のノートブックに書き込み、それを読み、特定のノートを消去し、ノートブック全体をきれいにするのと同じです！

Window sessionStorageオブジェクト

sessionStorageとは？

sessionStorageは、localStorageの忘れやすいいとこのようなものです。1セッションのみデータを保存します。ブラウザタブを閉じると、データが消えます。

sessionStorageの使い方

sessionStorageの使い方はlocalStorageと非常に似ています：

// データの保存
sessionStorage.setItem("tempScore", "1000");

// データの取得
let currentScore = sessionStorage.getItem("tempScore");
console.log(currentScore); // 出力: 1000

// データの削除
sessionStorage.removeItem("tempScore");

// 全データのクリア
sessionStorage.clear();

これは、プレイヤーが積極的にプレイしている間にだけ必要なゲームスコアのような一時的な情報を保存するのに非常に適しています。

CookieとlocalStorageとsessionStorageの比較

では、これらのストレージ方法を楽しい類似で比較してみましょう：

Cookies はsticky notes（ sticky note）のようです。小さくて、サーバーが読み取れるし、有効期限があります。
localStorage は個人文書のようです。多くの情報を保存し、長期間保持します。
sessionStorage はホワイトボードのようです。一時的に情報を保持し、終了すると消えます。

以下に便利な比較表を示します：

特性	Cookie	localStorage	sessionStorage
容量	~4KB	~5MB	~5MB
有効期限	手動設定	無期限	タブ閉じる時
サーバーアクセス	はい	いいえ	いいえ
リクエスト送信	はい	いいえ	いいえ

ストレージオブジェクトのプロパティとメソッド

localStorageとsessionStorageは同じメソッドとプロパティを持っています。それらを見ていきましょう：

プロパティ

length：保存項目の数を返します。

console.log(localStorage.length);

メソッド

setItem(key, value)：キー/値のペアをストレージに追加します。
getItem(key)：指定されたキーに関連する値を取得します。
removeItem(key)：指定されたキーに関連する項目を削除します。
clear()：ストレージ内のすべての項目を削除します。
key(index)：指定されたインデックスのキー名を返します。

以下にこれらのメソッドを使った例を示します：

// setItemを使う
localStorage.setItem("fruit", "apple");
localStorage.setItem("vegetable", "carrot");

// getItemを使う
console.log(localStorage.getItem("fruit")); // 出力: apple

// keyを使う
console.log(localStorage.key(0)); // 出力: fruit（またはcarrot、順序は保証されません）

// lengthを使う
console.log(localStorage.length); // 出力: 2

// removeItemを使う
localStorage.removeItem("vegetable");

// clearを使う
localStorage.clear();

そして、ここまででウェブストレージの世界への初めてのステップを踏みました！実践が大事です。簡単なウェブページを作成して、これらのストレージ方法を試してみてください。localStorageを使ってプレイヤーのハイスコアを保存する小游戏を作成してみてはいかがでしょうか？

最後に、あなたにコードのジョークを：

プログラマーがダークモードを好む理由は何ですか？ライトはバグを引き寄せるからです！??

ハッピーコーディング、そして忘れてならない、すべてのエキスパートもかつては初心者でした。学び続け、コードを書き続け、そして最も重要なのは、楽しむことです！

Credits: Image by storyset