JavaScriptローカルストレージ活用法10選 – Japanシーモア

JavaScriptローカルストレージ活用法10選

JavaScriptローカルストレージの使い方とカスタマイズ方法を徹底解説JS
この記事は約13分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptのローカルストレージを活用する方法が身に付きます。

さまざまな使い方やカスタマイズ方法、注意点や対処法を徹底解説しているので、初心者でも安心してJavaScriptのローカルストレージを学ぶことができます。

●ローカルストレージとは

ローカルストレージは、Webブラウザによって提供されるストレージ機能で、ユーザーのデータをブラウザ上に保存できる仕組みです。

これにより、サーバーとのやり取りを減らし、ユーザー体験を向上させることができます。

●ローカルストレージの基本的な使い方

ローカルストレージの操作は、主に次の3つのメソッドを使用して行います。

  1. setItem(key, value)：データを保存する
  2. getItem(key)：データを取得する
  3. removeItem(key)：データを削除する

○サンプルコード1：データの保存

データをローカルストレージに保存する方法です。

下記のサンプルコードでは、”name”というキーに対して、”Taro”という値を保存しています。

// データをローカルストレージに保存する
localStorage.setItem('name', 'Taro');

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

保存したデータをローカルストレージから取得する方法です。

下記のサンプルコードでは、”name”というキーに対応する値を取得しています。

// ローカルストレージからデータを取得する
let name = localStorage.getItem('name');
console.log(name); // "Taro"が表示される

○サンプルコード3：データの削除

ローカルストレージからデータを削除する方法です。

下記のサンプルコードでは、”name”というキーに対応するデータを削除しています。

// ローカルストレージからデータを削除する
localStorage.removeItem('name');

●応用例とサンプルコード

ローカルストレージを活用した実用的な例を紹介します。

○サンプルコード4：ToDoリスト

ToDoリストアプリケーションで、タスクの追加と削除をローカルストレージを使って実現します。

// ToDoリストのタスクをローカルストレージに保存する
function saveTask(task) {
  let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  tasks.push(task);
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

// ToDoリストのタスクをローカルストレージから削除する
function deleteTask(task) {
  let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  let index = tasks.indexOf(task);
  if (index !== -1) {
    tasks.splice(index, 1);
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }
}

○サンプルコード5：訪問回数のカウント

ユーザーがサイトを訪れるたびに訪問回数をカウントし、ローカルストレージに保存します。

// 訪問回数をカウントする関数
function countVisits() {
  // ローカルストレージから訪問回数を取得する
  let visits = parseInt(localStorage.getItem('visits')) || 0;
  // 訪問回数を1増やす
  visits += 1;
  // 訪問回数をローカルストレージに保存する
  localStorage.setItem('visits', visits);
  return visits;
}

console.log('訪問回数:', countVisits());

○サンプルコード6：ショッピングカート

ショッピングカート機能を実装し、カート内の商品データをローカルストレージに保存します。

// カートに商品を追加する関数
function addItemToCart(item) {
  // ローカルストレージからカート内の商品データを取得する
  let cartItems = JSON.parse(localStorage.getItem('cart')) || [];
  // 商品をカートに追加する
  cartItems.push(item);
  // カート内の商品データをローカルストレージに保存する
  localStorage.setItem('cart', JSON.stringify(cartItems));
}

// カートから商品を削除する関数
function removeItemFromCart(item) {
  // ローカルストレージからカート内の商品データを取得する
  let cartItems = JSON.parse(localStorage.getItem('cart')) || [];
  // 商品のインデックスを取得する
  let index = cartItems.findIndex(cartItem => cartItem.id === item.id);
  // インデックスが見つかった場合、商品をカートから削除する
  if (index !== -1) {
    cartItems.splice(index, 1);
    // カート内の商品データをローカルストレージに保存する
    localStorage.setItem('cart', JSON.stringify(cartItems));
  }
}

○サンプルコード7：ユーザー設定の保存

ユーザーの設定データ（例：テーマカラー、言語設定など）をローカルストレージに保存します。

// ユーザー設定を保存する関数
function saveUserSettings(settings) {
  // ユーザー設定をローカルストレージに保存する
  localStorage.setItem('userSettings', JSON.stringify(settings));
}

// ユーザー設定を取得する関数
function getUserSettings() {
  // ローカルストレージからユーザー設定を取得する
  return JSON.parse(localStorage.getItem('userSettings'));
}

○サンプルコード8：ブックマーク機能

ユーザーがブックマークしたURLをローカルストレージに保存します。

// ブックマークを追加する関数
function addBookmark(url) {
  // ローカルストレージからブックマークデータを取得する
  let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
  // URLが既にブックマークされていないか確認する
  if (!bookmarks.includes(url)) {
    // ブックマークデータにURLを追加する
    bookmarks.push(url);
    // ブックマークデータをローカルストレージに保存する
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }
}

// ブックマークを削除する関数
function removeBookmark(url) {
  // ローカルストレージからブックマークデータを取得する
  let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
  // URLのインデックスを取得する
  let index = bookmarks.indexOf(url);
  // インデックスが見つかった場合、ブックマークを削除する
  if (index !== -1) {
    bookmarks.splice(index, 1);
    // ブックマークデータをローカルストレージに保存する
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }
}

○サンプルコード9：オフラインアプリケーション

オフライン時にもアプリケーションを使用できるよう、データをローカルストレージに保存します。

// データを保存する関数
function saveData(data) {
  // データをローカルストレージに保存する
  localStorage.setItem('appData', JSON.stringify(data));
}

// データを取得する関数
function getData() {
  // ローカルストレージからデータを取得する
  return JSON.parse(localStorage.getItem('appData'));
}

○サンプルコード10：データの暗号化

データを暗号化してローカルストレージに保存し、復号化して取得します。

// 暗号化関数
async function encryptData(data, key) {
  // 文字列をArrayBufferに変換
  let encoder = new TextEncoder();
  let encodedData = encoder.encode(data);

  // データを暗号化する
  let encryptedData = await crypto.subtle.encrypt({ name: "AES-GCM", iv: key }, key, encodedData);

  // ArrayBufferをBase64文字列に変換
  let base64EncryptedData = btoa(String.fromCharCode.apply(null, new Uint8Array(encryptedData)));

  return base64EncryptedData;
}

// 復号化関数
async function decryptData(encryptedData, key) {
  // Base64文字列をArrayBufferに変換
  let binaryData = atob(encryptedData);
  let buffer = new ArrayBuffer(binaryData.length);
  let byteView = new Uint8Array(buffer);
  for (let i = 0; i < binaryData.length; i++) {
    byteView[i] = binaryData.charCodeAt(i);
  }

  // データを復号化する
  let decryptedData = await crypto.subtle.decrypt({ name: "AES-GCM", iv: key }, key, buffer);

  // ArrayBufferを文字列に変換
  let decoder = new TextDecoder();
  let decodedData = decoder.decode(decryptedData);

  return decodedData;
}

// 暗号化してデータを保存する関数
async function saveEncryptedData(data, key) {
  // データを暗号化する
  let encryptedData = await encryptData(data, key);
  // 暗号化されたデータをローカルストレージに保存する
  localStorage.setItem('encryptedData', encryptedData);
}

// 復号化してデータを取得する関数
async function getDecryptedData(key) {
  // ローカルストレージから暗号化されたデータを取得する
  let encryptedData = localStorage.getItem('encryptedData');
  // 暗号化されたデータを復号化する
  let decryptedData = await decryptData(encryptedData, key);
  return decryptedData;
}

●注意点と対処法

ローカルストレージは次の注意点があります。

セキュリティ

ローカルストレージは安全なデータ保存方法ではありません。

機密情報は保存しないでください。

容量制限

ローカルストレージには容量制限があります。

大量のデータを保存する場合は、IndexedDBなどの代替手段を検討してください。

同期性

ローカルストレージは同期的に動作し、大量のデータ操作があるとパフォーマンスに影響する可能性があります。

非同期処理が必要な場合は、IndexedDBを使用してください。

●カスタマイズ方法

ローカルストレージを利用したアプリケーションをカスタマイズする方法をいくつか紹介します。

エクスパイア時間の設定

データの有効期限を設定し、期限が切れたデータを自動的に削除する機能を実装できます。

下記はエクスパイア時間を設定するサンプルコードです。

// データを保存する関数（エクスパイア時間つき）
function saveDataWithExpire(key, data, expire) {
  const expireTime = new Date().getTime() + expire;
  const storedData = { value: data, expire: expireTime };
  localStorage.setItem(key, JSON.stringify(storedData));
}

// データを取得する関数（エクスパイア時間を考慮）
function getDataWithExpire(key) {
  const storedData = JSON.parse(localStorage.getItem(key));
  if (!storedData) return null;

  const currentTime = new Date().getTime();
  if (storedData.expire < currentTime) {
    localStorage.removeItem(key);
    return null;
  }

  return storedData.value;
}

データの圧縮

データ量が多い場合、データを圧縮してローカルストレージに保存できます。

LZ-Stringライブラリなどを使用して、文字列を圧縮・解凍できます。

// データを圧縮して保存する関数
function saveCompressedData(key, data) {
  const compressedData = LZString.compress(data);
  localStorage.setItem(key, compressedData);
}

// 圧縮されたデータを取得して解凍する関数
function getDecompressedData(key) {
  const compressedData = localStorage.getItem(key);
  const decompressedData = LZString.decompress(compressedData);
  return decompressedData;
}

名前空間の利用

アプリケーションが大規模になると、ローカルストレージのキーが競合する可能性があります。

名前空間を利用して、キーの競合を防ぐことができます。

const NAMESPACE = 'yourAppName';

function saveNamespacedData(key, data) {
  localStorage.setItem(`${NAMESPACE}:${key}`, data);
}

function getNamespacedData(key) {
  return localStorage.getItem(`${NAMESPACE}:${key}`);
}

まとめ

ローカルストレージは、ブラウザにデータを保存する簡単な方法です。

しかし、セキュリティや容量制限、同期性の問題があるため、注意して使用する必要があります。

本記事で紹介したサンプルコードを利用し、様々なアプリケーションを開発してみてください。