Web Storage、Cookie、IndexedDBの比較
JavaScriptからブラウザ上でデータを保存する方法として、Web Storage（sessionStorage、localStorage）、cookie、IndexedDBを利用することができます。
本記事ではこれらのデータ保存方法の特徴を比較し、それぞれの適切な用途を解説します。
レシピ
Ajax
- XMLHttpRequestオブジェクトのプロパティ、メソッド、イベント一覧
- XMLHttpRequestオブジェクトを使ってAjaxを実装する
- XMLHttpRequestでファイルを読み込む
- XMLHttpRequestでファイルを送信する
- XMLHttpRequestでフォームに入力されたデータを送信する
- XMLHttpRequestによるファイルの読み込み状況を取得する
- XMLHttpRequestのリクエストをキャンセルする
- XMLHttpRequestによる通信で一定時間経過したらリクエストをキャンセルする
- Fetch APIを使ってAjaxを実装する
- Fetch APIでフォームに入力されたデータを送信する
- Fetch APIでファイルを送信する
- Fetch APIでファイルを読み込む
- Fetch APIが使えるか確認する
- Fetch APIでJSON形式のデータを送信する
- Fetch APIから画像ファイルをJSON形式で送信する
- Fetch APIで受け取ったレスポンスのHTTPステータスコードを取得する
- Fetch APIで受け取ったレスポンスの送信元URLを取得する
アニメーション
配列
音声
ブラウザ
日付・時間
HTML・DOM
- JavaScriptでHTMLを操作する
- html要素、head要素、body要素を取得する
- 特定のHTML要素の子要素、親要素、前後の要素を取得する
- 指定した位置にHTML要素を挿入する
- HTML要素が子要素を持つか確認する
- 新しいHTML要素を作成する
- 指定したHTML要素を削除する
- img要素を動的に作成して画像を表示する
- HTML要素を複製（コピー）する
- HTML要素を他のHTML要素に置き換える
- HTML要素内のテキストを取得、編集する
- HTML要素のソースコードを取得、編集する
- HTML要素の属性を取得、編集する
- HTML要素が特定の属性を持つか確認する
- 別タブを開くリンク「_blank」に「rel="noopener"」を付与する
- HTML要素のクラスを追加、削除する
- HTML要素が特定のクラス名を持つか確認する
- HTML要素に直接スタイルを設定する
- HTML要素に適用されたスタイルを取得する
- 指定した親要素を取得する
- 特定のHTML要素の前後、または内側に新しいHTML要素を追加する
イベント
- イベントリスナーを設定する
- マウスの各操作に対応したイベント一覧
- クリックしたときに処理を実行する
- タッチ（タップ）したときに処理を実行する
- 設定したイベントリスナーを解除する
- スワイプ／フリックしたときに処理を実行する
- マウスカーソルの位置座標を取得する
- タッチ（タップ）したときの位置座標を取得する
- スクロールしたときに処理を実行する
- ページが読み込まれたら処理を実行する
- テキストを選択したときに処理を実行する
- キーボード入力時に処理を実行する
- キーボードの押されたキーを取得する
- 全角入力の未確定の状態を取得する
- 全角入力の開始と終了を検出する
- ページの表示状態の切り替わりを取得する
- ブラウザのタブが表示／非表示になるタイミングで処理を実行する
- ブラウザの画面サイズが変更されたときに処理を実行する
- JavaScriptコードにメディアクエリを設定する
- 指定したイベントを発生させる
- HTMLのデフォルトの挙動をキャンセルする
- ドラッグ・ドロップしたときに処理を実行する
- ドラッグ・ドロップでファイルを選択する
- フォームが入力されたタイミングで処理を実行する
- フォーム送信時に処理を実行する
- CSSのtransitionプロパティによるアニメーションの開始や終了時に処理を実行する
- CSSのanimationプロパティによるアニメーションが実行されたときに処理を実行する
- 画像の読み込みが完了したら処理を実行する
- 1度だけのイベントリスナーを設定する
フォーム
- フォームに入力された値を取得する
- チェックボックスの選択状態を取得・変更する
- 選択状態のチェックボックスだけを取得する
- ラジオボタンの選択状態を取得・変更する
- セレクトボックス（select要素）の選択した項目を取得・変更する
- ファイル選択時にファイル情報を取得する
- 選択されたファイルの内容を取得する
- スライダーの値を取得する
- スライダーを特定の範囲で動かせないように設定する
- カラーピッカーの値を取得する
- パスワード入力欄でパスワード表示・非表示を切り替える
- セレクトボックス（select要素）を選択状態にする
- セレクトボックス（select要素）の選択状態を解除する
- セレクトボックス（select要素）で選択されている項目のラベルを取得する
IndexedDB
動画
数値
オブジェクト
文字列
- 文字列の長さを取得する
- 文字列の先頭、末尾にある空白を取り除く
- 文字列をURIエンコード（エスケープ）・デコードする
- 文字列の中で変数を展開する
- 文字列の中に特定のワードが含まれているか検索する
- 文字列から指定した位置にある文字を取得する
- 文字列から指定した文字を取り出す
- 特定の文字を他の文字に置き換える
- アルファベットを大文字、小文字に変換する
- 文字列を分割する
- 文字列を結合する
- 文字列が指定した長さになるまで文字を追加する
- 文字列を置き換えてハイライト表示する
- 数値を指定した桁数の文字列に変換する
- 改行コードをbr要素に置き換える
- 数値を通貨の表記に変換する
- 数字を指定した桁数まで0埋めする