Zenn
🗃️

localStorageについてのメモ

2025/03/06に公開1件
JavaScript
メソッド
オブジェクト
localstorage
tech

localStorageについてのメモです。
誤りがありましたら、ご教示いただけますと幸いです！

localStorageについて

  • ブラウザにデータを保存できるオブジェクト（Web Storage APIの一部）。
  • キーと値のペア（key-value）の形式でデータを保存する。
  • 保存されたデータはページを閉じても残る（セッションが切れても消えない）。
  • 文字列（string）としてデータを保存するため、オブジェクトなどは JSON.stringify() を使う必要がある。

localStorageのメソッド

setItem(key, value)

ローカルストレージにデータを保存するメソッド

例
localStorage.setItem('test', JSON.stringify(todoData));
  • setItem(キー, 値) の形式でデータを保存。
  • キー（test）：データの名前（後で取り出すための識別子）。
    　　※キー名は一意であればよく、同じキー名を使うとそのキーに対応するデータは上書きされる。
    　　※他のデータと衝突しないよう、わかりやすいキー名をつけるのがベスト。
  • 値（JSON.stringify(todoData)）：保存するデータ（文字列として保存するため、オブジェクトは JSON.stringify() で変換）。

getItem(key)

ローカルストレージからデータを取得するメソッド。

例
return JSON.parse(localStorage.getItem('test')) || [];
  • getItem(キー) を使って、キーに対応するデータを取得。
  • 取り出したデータは 文字列 なので、オブジェクトや配列として使うには JSON.parse() で変換。

▼今回使用していないが、localStorageで使える主なメソッドめも。

removeItem(key)

指定したキーとその値をローカルストレージから削除するメソッド。

例
localStorage.removeItem('username');  // 'username' キーを削除

4. clear()

ローカルストレージ内のすべてのデータを削除するメソッド。すべてのキーとその値が消去される。

例
localStorage.clear();  // ローカルストレージを完全にクリア

5. key(index)

ローカルストレージに保存されているデータのキーを、インデックス番号を指定して取得するメソッド。インデックスは0から始まる。

例
localStorage.setItem('name', 'Alice');
localStorage.setItem('age', '25');

console.log(localStorage.key(0));  // 'name'
console.log(localStorage.key(1));  // 'age'

6. length

ローカルストレージに保存されているアイテムの数を返すメソッド。

例
console.log(localStorage.length);  // ローカルストレージに保存されているアイテムの数

Discussion