ローカルストレージでデータ永続

• はじめに
• localStorageの基本操作
• 実践例：ショッピングカートの保存
• まとめ

はじめに

JavaScript初心者の方にとって、ブラウザ上でデータを永続化する方法は重要です。ローカルストレージ（localStorage）は、キーと値のペアをブラウザに保存し、ページを閉じても残るため、データ保存に便利です。この記事では、localStorageを使ったデータ保存、読み出し、削除の基本を解説します。

localStorageの基本操作

localStorageは、setItemでデータを保存し、getItemで読み出し、removeItemで削除します。以下のコードは、文字列を保存し、取得し、削除する一連の流れを示しています。

localStorage.setItem('username', 'alice'); // データ保存
const name = localStorage.getItem('username'); // 読み出し
console.log(name); // alice
localStorage.removeItem('username'); // 削除

localStorageは文字列のみを扱うため、オブジェクトを保存したい場合はJSONでシリアライズします。

const user = { id: 1, name: 'bob' };
localStorage.setItem('user', JSON.stringify(user));
const stored = JSON.parse(localStorage.getItem('user'));
console.log(stored.name); // bob

実践例：ショッピングカートの保存

ショッピングカートの状態をブラウザ保存する例です。カートに商品を追加すると、配列をJSON化してlocalStorageに保存します。

function addToCart(item) {
  const cart = JSON.parse(localStorage.getItem('cart')) || [];
  cart.push(item);
  localStorage.setItem('cart', JSON.stringify(cart));
}
function getCart() {
  return JSON.parse(localStorage.getItem('cart')) || [];
}
function clearCart() {
  localStorage.removeItem('cart');
}

このように、永続化されたデータはページをリロードしても保持され、ユーザー体験が向上します。

まとめ

JavaScript初心者でも簡単に使えるローカルストレージは、データ保存、ブラウザ保存、永続化に最適です。setItemで保存、getItemで読み出し、removeItemで削除する基本操作を覚えておけば、さまざまなアプリケーションで活用できます。ぜひ実際に手を動かして、localStorageの力を体感してみてください。

この記事はAIによって作成されました。