Web Storage API

この記事では「Web Storage API」について、基本の意味と使い方を初心者向けにやさしく説明します。

A short-term storage space that keeps data only while the same tab is open, and automatically clears everything when the tab is closed.

sessionStorage

同じタブを開いている間だけデータを置いておける、短期間の保存場所で、タブを閉じると自動的に消えるメモのような機能。

sessionStorage とは？

sessionStorage（セッションストレージ）は、「同じタブ（同じウィンドウ）を開いているあいだだけ使える、小さなメモ帳」です。

ページをリロードしても消えない
でも、タブを閉じると全部消える
ブラウザの外には保存されず、同じページの中だけで読んだり書いたりできる

ユーザーが途中でページを更新したり、入力欄を少し移動しても、タブを閉じるまではデータを残しておけます。

「タブを閉じたら自動的に片付く temporary（短い時間の）保存場所」というイメージです。

簡単な使用例

以下は、入力した名前を sessionStorage に保存して、次のページ読み込み時も表示する例です。

JavaScript

function saveName() {
    const name = document.getElementById('nameInput').value;
    sessionStorage.setItem('userName', name);
}

function loadName() {
    const savedName = sessionStorage.getItem('userName');
    if (savedName) {
        document.getElementById('greeting').textContent = `こんにちは、${savedName}さん`;
    }
}

window.onload = loadName;

HTML

<input id="nameInput" type="text" placeholder="名前を入力">
<button onclick="saveName()">保存</button>
<p id="greeting"></p>

入力後「保存」を押せば、ページ更新しても表示され続ける
タブを閉じたらリセットされる

サイトのトップページ

HTML (HyperText Markup Language)

ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。

button 要素

クリックで何かが起きるボタンの作り方を、submit/button/resetの違い・Enterで送信される理由・URL移動は<a>推奨・formactionで送信先切り替え・アイコンボタンの名前付けまで、短いコードとコツで迷わず実装できるようにまとめたページ。

要素に固有の識別名（id）を指定する。同じ識別名はページ内で１回しか使えません。

input 要素

テキスト入力、パスワード入力、ラジオボタン、チェックボックス、ファイル選択などのフォームコントロールを提供します。

placeholder: input 要素の placeholder 属性で指定した値が、入力欄に初期値として表示されます。
type="text": １行のテキストボックスを作成する。

文章を論理的な段落として区切り、ブラウザや支援技術に「ここで話題が切り替わる」と伝えるためのタグです。

CSS (Cascading Style Sheets)

ウェブページのデザインやレイアウトを設定します。色、フォント、レイアウトなどのスタイルを指定します。

ウェブページにインタラクティブな動作を追加します。フォームの検証、アニメーション、リアルタイムのデータ処理などを行います。

const: 文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。
document: ドキュメントを参照する。
function 「関数」: 特定の処理をひとまとまりにして呼び出しやすくし、再利用可能にするためのコードの部品です。
getElementById: オブジェクトの情報を id で取得する。
if ... else: 条件分岐処理をする。
onClick: オブジェクトがクリックされたら処理を実行する。
textContent: テキストの取得や書き込み。
value: ボタンに表示する文字列や、入力フィールドに入力されている文字列など、各エレメントの値を参照、設定します。
window.onload: windowの loadイベントに対応するイベントハンドラです。

PHP (Hypertext Preprocessor)

サーバー上で動作してデータベースと連携し、動的なWebページを簡単に作成できるスクリプト言語です。

APIとは、異なるソフトウェアやシステム同士がデータや機能をやり取りするためのインターフェースです。

Console API

console.log: コンソール画面にログを表示する。

Web Storage（localStorage / sessionStorage）

Web Storage は、Webサイトがあなたのブラウザの中に小さなメモ帳のようにデータを保存しておけるしくみで、ログイン状態や設定内容などを次にアクセスしたときにも覚えておくことができます。

getItem: ブラウザに保存しておいたデータを、名前を指定して取り出すためのシンプルな方法です。
setItem: setItem は、ブラウザの中に『名前と内容のペア』を保存して、ページを閉じても残しておけるしくみです。