localstorage.getitemを使ってデータの操作を簡素化する8つの方法

JavaScriptのローカルストレージでデータ取得する方法JS
この記事は約21分で読めます。

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、基礎知識があれば初心者にも理解していただけるように、常に解説内容のわかりやすさや記事の品質に注力しております。不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●LocalStorage.getItemとは？

皆さんは、Webアプリケーションを開発する際に、ユーザーのデータを保存したり、アプリケーションの設定を保持したりする必要があることに気づいたことはありませんか？

そんなときに活躍するのが、JavaScriptのLocalStorageなのです。

○LocalStorageの概要

LocalStorageは、WebブラウザにあるWebストレージの一種で、キーと値のペアでデータを保存することができます。

LocalStorageに保存されたデータは、ブラウザを閉じたり、コンピュータを再起動したりしても消えることはありません。

つまり、永続的にデータを保持できるのです。

LocalStorageは、同一オリジンポリシーに従っているので、あるWebサイトから保存されたデータは、そのWebサイトからしかアクセスできません。

これにより、セキュリティが保たれています。

○getItemメソッドの役割

LocalStorageからデータを取得するには、getItemメソッドを使います。

getItemメソッドは、指定されたキーに対応する値を返します。

キーが存在しない場合はnullを返します。

getItemメソッドを使うことで、LocalStorageに保存されたデータを簡単に取得することができます。

例えば、ユーザーがWebアプリケーションで設定した言語や、ダークモードの状態などを取得する際に、getItemメソッドが役立ちます。

○クッキーとの違い

LocalStorageとクッキーは、どちらもWebブラウザにデータを保存するための仕組みですが、いくつかの違いがあります。

まず、データの容量制限が異なります。

クッキーは1つのドメインあたり4KBまでしか保存できませんが、LocalStorageは1つのオリジンあたり5MBまで保存できます。

つまり、LocalStorageはクッキーよりもはるかに大きなデータを保存できるのです。

また、クッキーはHTTPリクエストごとにサーバーに送信されますが、LocalStorageはサーバーに送信されません。

これにより、LocalStorageを使うことで、ネットワークのトラフィックを減らすことができます。

さらに、クッキーにはデフォルトで有効期限が設定されていますが、LocalStorageには有効期限がありません。

LocalStorageに保存されたデータは、明示的に削除されない限り、永続的に保持されます。

●LocalStorage.getItemの使い方

LocalStorage.getItemの使い方について、具体的なサンプルコードを交えながら詳しく解説していきましょう。

getItemメソッドを使いこなすことで、Webアプリケーションのパフォーマンスを向上させ、ユーザーエクスペリエンスを改善することができます。

○サンプルコード1：基本的な使い方

まずは、LocalStorage.getItemの基本的な使い方から見ていきましょう。

次のコードは、LocalStorageから “username” というキーに対応する値を取得する例です。

// LocalStorageから "username" の値を取得
const username = localStorage.getItem("username");

// 取得した値を出力
console.log(username);

実行結果

John Doe

このコードでは、localStorage.getItem(“username”) を使って、”username” というキーに対応する値を取得しています。

取得した値は、username 変数に代入されます。

最後に、console.log(username) で取得した値を出力しています。

LocalStorageに “username” というキーが存在しない場合は、getItemメソッドはnullを返します。

したがって、取得した値を使う前に、nullチェックを行うことが重要です。

○サンプルコード2：デフォルト値の設定

LocalStorageから値を取得する際に、キーが存在しない場合はデフォルト値を使うことができます。

次のコードは、LocalStorageから “theme” というキーの値を取得し、存在しない場合はデフォルト値として “light” を使う例です。

// LocalStorageから "theme" の値を取得し、存在しない場合はデフォルト値 "light" を使う
const theme = localStorage.getItem("theme") || "light";

// 取得した値を出力
console.log(theme);

実行結果

light

このコードでは、localStorage.getItem(“theme”) || “light” という式を使っています。

この式は、LocalStorageから “theme” の値を取得し、存在しない場合は “light” を返します。

これにより、キーが存在しない場合でも、デフォルト値を使うことができます。

○サンプルコード3：JSONデータの取得

LocalStorageには、文字列以外にもJSONデータを保存することができます。

JSONデータを保存する場合は、JSON.stringify() メソッドを使ってJSONデータを文字列に変換します。

JSONデータを取得する場合は、JSON.parse() メソッドを使って文字列をJSONデータに変換します。

次のコードは、LocalStorageからJSONデータを取得する例です。

// LocalStorageから "settings" の値を取得
const settingsJson = localStorage.getItem("settings");

// 文字列をJSONデータにパース
const settings = JSON.parse(settingsJson);

// 取得したデータを出力
console.log(settings);

実行結果

{
  "notifications": true,
  "language": "en",
  "fontSize": 14
}

このコードでは、localStorage.getItem(“settings”) を使って、”settings” というキーに対応するJSON文字列を取得しています。

次に、JSON.parse(settingsJson) を使って、取得したJSON文字列をJSONデータにパースしています。

最後に、console.log(settings) で取得したJSONデータを出力しています。

JSONデータを取得する際は、JSON文字列が不正な形式の場合、JSON.parse() メソッドがエラーをスローすることに注意が必要です。

エラーハンドリングについては、次のサンプルコードで詳しく説明します。

○サンプルコード4：エラーハンドリング

LocalStorageから値を取得する際に、キーが存在しない場合やJSON文字列が不正な形式の場合は、適切にエラーハンドリングを行う必要があります。

次のコードは、LocalStorageからJSONデータを取得する際のエラーハンドリングの例です。

let data;

try {
  // LocalStorageから "data" の値を取得
  const dataJson = localStorage.getItem("data");

  if (dataJson) {
    // 文字列をJSONデータにパース
    data = JSON.parse(dataJson);
  } else {
    // キーが存在しない場合のデフォルト値を設定
    data = { count: 0 };
  }
} catch (error) {
  console.error("JSONのパースに失敗しました:", error);
  // エラー時のデフォルト値を設定
  data = { count: 0 };
}

// 取得したデータを出力
console.log(data);

実行結果

{
  count: 0
}

このコードでは、try…catch文を使ってエラーハンドリングを行っています。

まず、localStorage.getItem(“data”) を使って、”data” というキーに対応するJSON文字列を取得しています。

次に、if文を使って、取得したJSON文字列が存在するかどうかを確認しています。

存在する場合は、JSON.parse(dataJson) を使ってJSON文字列をパースし、data変数に代入しています。

存在しない場合は、デフォルト値として { count: 0 } を設定しています。

エラーが発生した場合は、catch文で例外をキャッチし、console.error() でエラーメッセージを出力しています。

また、エラー時のデフォルト値として { count: 0 } を設定しています。

最後に、console.log(data) で取得したデータを出力しています。

●よくあるエラーと対処法

LocalStorage.getItemを使う際に、よく遭遇するエラーとその対処法について見ていきましょう。

これらのエラーは、初心者のエンジニアが陥りやすい落とし穴です。

エラーメッセージを理解し、適切に対処することで、スムーズにLocalStorageを活用できるようになります。

○「TypeError: Cannot read property ‘getItem’ of null」エラー

このエラーは、localStorageオブジェクトがnullの場合に発生します。

つまり、LocalStorageが使用できない環境で、getItemメソッドを呼び出そうとすると、このエラーが発生するのです。

エラーメッセージ

TypeError: Cannot read property 'getItem' of null

対処法としては、localStorageオブジェクトがnullでないことを確認してから、getItemメソッドを呼び出すことです。

次のようなコードで、LocalStorageが使用可能かどうかをチェックできます。

if (localStorage) {
  // LocalStorageが使用可能な場合の処理
  const value = localStorage.getItem("key");
  console.log(value);
} else {
  // LocalStorageが使用できない場合の処理
  console.log("LocalStorageが使用できません");
}

実行結果

value1

このコードでは、if文でlocalStorageオブジェクトがtruthyであるかどうかを確認しています。

truthyの場合は、LocalStorageが使用可能なので、getItemメソッドを呼び出しています。

falsyの場合は、LocalStorageが使用できないので、適切なメッセージを出力しています。

○「SyntaxError: Unexpected token u in JSON at position 0」エラー

このエラーは、JSON.parse()メソッドに渡された文字列が、有効なJSON形式ではない場合に発生します。

LocalStorageに保存されているデータが、正しいJSON形式でない場合、このエラーが発生することがあります。

エラーメッセージ

SyntaxError: Unexpected token u in JSON at position 0

対処法としては、JSON.parse()メソッドを呼び出す前に、try…catch文を使ってエラーをキャッチすることです。

エラーが発生した場合は、適切なデフォルト値を返すようにします。

let data;

try {
  const json = localStorage.getItem("data");
  data = JSON.parse(json);
} catch (error) {
  console.error("JSONのパースに失敗しました:", error);
  data = { default: true };
}

console.log(data);

実行結果

{
  default: true
}

このコードでは、try…catch文を使ってJSON.parse()メソッドを呼び出しています。

エラーが発生した場合は、catch文でエラーをキャッチし、console.error()でエラーメッセージを出力しています。

また、エラー時のデフォルト値として、{ default: true }を返しています。

○「QuotaExceededError: The quota has been exceeded.」エラー

このエラーは、LocalStorageの容量制限を超えた場合に発生します。

LocalStorageには、ブラウザやデバイスによって異なりますが、通常5MB〜10MBの容量制限があります。

この制限を超えてデータを保存しようとすると、このエラーが発生します。

エラーメッセージ

QuotaExceededError: The quota has been exceeded.

対処法としては、不要なデータを削除して容量を確保するか、サーバーサイドのストレージを使用することです。

次のコードは、LocalStorageの使用量を確認し、制限に近づいた場合に古いデータを削除する例です。

// LocalStorageの使用量を取得
const usage = JSON.stringify(localStorage).length;
console.log(`LocalStorageの使用量: ${usage} bytes`);

// 制限に近づいた場合は古いデータを削除
if (usage > 4500000) {
  console.log("LocalStorageの容量が限界に近づいています。古いデータを削除します。");
  localStorage.removeItem("oldData");
}

// 新しいデータを保存
localStorage.setItem("newData", JSON.stringify({ message: "新しいデータ" }));
console.log("新しいデータを保存しました。");

実行結果

LocalStorageの使用量: 4500180 bytes
LocalStorageの容量が限界に近づいています。古いデータを削除します。
新しいデータを保存しました。

このコードでは、JSON.stringify(localStorage).lengthを使って、LocalStorageの使用量をバイト単位で取得しています。

使用量が4,500,000バイト（約4.5MB）を超えた場合は、古いデータ（”oldData”キー）を削除しています。

その後、新しいデータ（”newData”キー）を保存しています。

LocalStorageの容量制限に注意し、必要なデータのみを保存するようにすることが重要です。

また、サーバーサイドのストレージと組み合わせることで、より大量のデータを扱うことができます。

●LocalStorage.getItemの応用例

LocalStorage.getItemを使いこなすことで、Webアプリケーションの機能を大きく拡張できます。

ユーザー設定の保存、言語設定の切り替え、ダークモードの切り替えなど、様々な場面で活用できるのです。

それでは、実際のサンプルコードを見ながら、LocalStorage.getItemの応用例を探っていきましょう。

○サンプルコード5：ユーザー設定の保存と取得

Webアプリケーションでは、ユーザーが設定した情報を保存しておくことが重要です。

例えば、表示する記事の件数や、通知の設定などです。

LocalStorageを使えば、これらの設定を簡単に保存・取得できます。

// ユーザー設定を保存する関数
function saveUserSettings(settings) {
  localStorage.setItem("userSettings", JSON.stringify(settings));
  console.log("ユーザー設定を保存しました。");
}

// ユーザー設定を取得する関数
function getUserSettings() {
  const settings = localStorage.getItem("userSettings");
  return settings ? JSON.parse(settings) : { articleCount: 10, notifications: true };
}

// ユーザー設定を保存
const userSettings = { articleCount: 20, notifications: false };
saveUserSettings(userSettings);

// ユーザー設定を取得
const savedSettings = getUserSettings();
console.log("保存されたユーザー設定:", savedSettings);

実行結果

ユーザー設定を保存しました。
保存されたユーザー設定: {articleCount: 20, notifications: false}

このコードでは、ユーザー設定をLocalStorageに保存・取得するための関数を定義しています。

saveUserSettings関数は、引数で受け取ったユーザー設定をJSON形式の文字列に変換し、LocalStorageの”userSettings”キーに保存します。

getUserSettings関数は、LocalStorageから”userSettings”キーの値を取得し、JSON形式の文字列をパースしてオブジェクトに変換します。

ユーザー設定が保存されていない場合は、デフォルトの設定を返します。

○サンプルコード6：言語設定の切り替え

多言語対応のWebアプリケーションでは、ユーザーが選択した言語設定を保存しておく必要があります。

LocalStorageを使えば、言語設定を簡単に切り替えることができます。

// 言語設定を保存する関数
function saveLanguage(lang) {
  localStorage.setItem("language", lang);
  console.log(`言語設定を${lang}に変更しました。`);
}

// 言語設定を取得する関数
function getLanguage() {
  return localStorage.getItem("language") || "en";
}

// 言語設定を切り替える関数
function switchLanguage() {
  const currentLang = getLanguage();
  const newLang = currentLang === "en" ? "ja" : "en";
  saveLanguage(newLang);
  updateUILanguage();
}

// UIの言語を更新する関数（仮の実装）
function updateUILanguage() {
  const lang = getLanguage();
  console.log(`UIの言語を${lang}に更新しました。`);
}

// 初期化時に言語設定を取得
const initialLanguage = getLanguage();
console.log(`初期言語設定: ${initialLanguage}`);

// 言語設定を切り替え
switchLanguage();

実行結果

初期言語設定: en
言語設定をjaに変更しました。
UIの言語をjaに更新しました。

このコードでは、言語設定をLocalStorageに保存・取得するための関数を定義しています。

saveLanguage関数は、引数で受け取った言語設定をLocalStorageの”language”キーに保存します。

getLanguage関数は、LocalStorageから”language”キーの値を取得します。言語設定が保存されていない場合は、デフォルトの言語として”en”を返します。

switchLanguage関数は、現在の言語設定を取得し、新しい言語設定に切り替えます。

切り替えた後、updateUILanguage関数を呼び出して、UIの言語を更新します。

初期化時には、getLanguage関数を使って保存された言語設定を取得し、console.logで出力しています。

○サンプルコード7：ダークモードの切り替え

最近のWebアプリケーションでは、ダークモードの切り替え機能がよく見られます。

LocalStorageを使えば、ユーザーが選択したテーマ（ライトモードまたはダークモード）を保存し、次回のアクセス時に適用することができます。

// テーマを保存する関数
function saveTheme(theme) {
  localStorage.setItem("theme", theme);
  console.log(`テーマを${theme}に変更しました。`);
}

// テーマを取得する関数
function getTheme() {
  return localStorage.getItem("theme") || "light";
}

// テーマを切り替える関数
function toggleTheme() {
  const currentTheme = getTheme();
  const newTheme = currentTheme === "light" ? "dark" : "light";
  saveTheme(newTheme);
  applyTheme(newTheme);
}

// テーマを適用する関数
function applyTheme(theme) {
  document.body.className = theme;
  console.log(`${theme}テーマを適用しました。`);
}

// 初期化時にテーマを適用
const initialTheme = getTheme();
applyTheme(initialTheme);

// テーマを切り替え
toggleTheme();

実行結果

lightテーマを適用しました。
テーマをdarkに変更しました。
darkテーマを適用しました。

このコードでは、テーマをLocalStorageに保存・取得するための関数を定義しています。

saveTheme関数は、引数で受け取ったテーマをLocalStorageの”theme”キーに保存します。

getTheme関数は、LocalStorageから”theme”キーの値を取得します。テーマが保存されていない場合は、デフォルトのテーマとして”light”を返します。

toggleTheme関数は、現在のテーマを取得し、新しいテーマに切り替えます。

切り替えた後、applyTheme関数を呼び出して、テーマをHTMLのbody要素のクラス名に適用します。

初期化時には、getTheme関数を使って保存されたテーマを取得し、applyTheme関数でそのテーマを適用しています。

○サンプルコード8：ショッピングカートの情報保持

ECサイトなどでは、ユーザーがカートに追加した商品情報を一時的に保存しておく必要があります。

LocalStorageを使えば、ユーザーがページを移動したり、ブラウザを閉じたりしても、カートの情報を維持することができます。

// カートに商品を追加する関数
function addToCart(item) {
  const cart = getCart();
  cart.push(item);
  saveCart(cart);
  console.log(`商品をカートに追加しました: ${item.name}`);
}

// カートの情報を保存する関数
function saveCart(cart) {
  localStorage.setItem("cart", JSON.stringify(cart));
}

// カートの情報を取得する関数
function getCart() {
  const cartJson = localStorage.getItem("cart");
  return cartJson ? JSON.parse(cartJson) : [];
}

// カートをクリアする関数
function clearCart() {
  localStorage.removeItem("cart");
  console.log("カートをクリアしました。");
}

// カートに商品を追加
const item1 = { id: 1, name: "商品1", price: 1000 };
const item2 = { id: 2, name: "商品2", price: 2000 };
addToCart(item1);
addToCart(item2);

// カートの情報を取得
const cart = getCart();
console.log("現在のカートの中身:", cart);

// カートをクリア
clearCart();

実行結果

商品をカートに追加しました: 商品1
商品をカートに追加しました: 商品2
現在のカートの中身: [
  { id: 1, name: "商品1", price: 1000 },
  { id: 2, name: "商品2", price: 2000 }
]
カートをクリアしました。

このコードでは、カートの情報をLocalStorageに保存・取得するための関数を定義しています。

addToCart関数は、引数で受け取った商品をカートに追加します。

具体的には、getCart関数でカートの情報を取得し、新しい商品を追加した後、saveCart関数でカートの情報をLocalStorageに保存します。

getCart関数は、LocalStorageから”cart”キーの値を取得し、JSON形式の文字列をパースしてオブジェクトに変換します。

カートの情報が保存されていない場合は、空の配列を返します。

clearCart関数は、localStorage.removeItemを使って”cart”キーを削除し、カートの情報をクリアします。

まとめ

LocalStorage.getItemは、Webアプリケーションの機能を大きく拡張する強力なツールです。

基本的な使い方から、ユーザー設定の保存、言語設定の切り替え、ダークモードの切り替え、ショッピングカートの情報保持など、様々な応用例を紹介しました。

エラーハンドリングとセキュリティにも十分注意しながら、LocalStorageの特性を理解し、適材適所で活用していきましょう。

皆さんのWebアプリケーションが、より使いやすく、より洗練されたものになることを願っています。