HTMLのlocalStorageで使用サイズを確認する方法をわかりやすく解説

localStorageは、複数のセッションにわたってデータを永続的に保存できるブラウザのストレージ機能です。Cookieと異なり、ページを閉じたりブラウザを再起動したりしてもデータが残るため、ユーザー設定や一時的なキャッシュの保存などに広く利用されています。

ただし、localStorageには最大約5MBという容量制限があるため、実際にどれくらいのサイズを使っているのかを把握しておくことが重要です。

localStorageのサイズを確認するサンプルコード

以下のコードを実行すると、各キーの使用サイズと合計サイズを確認できます。

var sum = 0;

// 各キーのサイズをループで集計
for(var i in localStorage) {
    var amount = (localStorage[i].length * 2) / 1024 / 1024;
    sum += amount;
    document.write( i + " = " + amount.toFixed(2) + " MB");
}
document.write( "合計 = " + sum.toFixed(2) + " MB");

コードの解説

このスクリプトのポイントは次のとおりです。

1. 文字数を2倍してバイト数に換算
localStorage内の文字列はUTF-16形式で保存されるため、1文字あたり2バイトとして計算しています。その値を1024で2回割ることで、単位をMB（メガバイト）に変換しています。

2. for...inループで全キーを走査
localStorageに格納されているすべてのキーを順番に取り出し、それぞれのデータサイズを求めます。

3. toFixed(2)で見やすく整形
小数点第2位まで表示することで、結果を読みやすくしています。

注意点

・5MBの上限はブラウザによって若干異なる場合があります。
・オブジェクトや配列を保存する場合は、JSON.stringify()で文字列に変換した後のサイズが消費容量となります。
・上限を超えて書き込もうとすると「QuotaExceededError」が発生するため、大量のデータを扱う場合は事前にサイズチェックを行いましょう。

このように、シンプルなJavaScriptのコードだけでlocalStorageの使用状況を可視化できます。ストレージ容量の管理やデバッグの際にぜひ活用してください。