[JavaScript] localStorageの概念と使用方法

ウェブ開発において、クライアント側にデータを保持する方法は数多く存在します。特に、localStorageはその代表例であり、ウェブページが閉じられたりリロードされたりしてもデータが消失しない、クライアント側での永続的な保存方法を指します。この機能は、ウェブページのセッション中にデータを一時的に保存するsessionStorageとは対照的です。localStorageは、単なるデータの保存だけでなく、ユーザーの設定情報やショッピングカートの情報など、多様な用途で使用されます。この記事では、localStorageの特徴や使用方法、注意点などを詳細に解説いたします。

localStorageとは？

localStorageは、ウェブページのセッションを跨いでキーと値のペアを保持するウェブストレージのソリューションです。

これにより、ウェブアプリケーションでデータを永続的に保持することができ、ユーザーエクスペリエンスの向上に重要な役割を果たします。このデータはユーザーのブラウザに保存されるため、サーバーへの繰り返しのリクエストなしに容易にアクセスすることができます。

localStorageの特徴

永続的な保存領域

localStorageに保存されたデータには有効期限がなく、ユーザーが手動で削除するか、ウェブアプリケーションがデータを削除する場面でのみ消失します。これは、sessionStorageがウェブページのセッション終了時にデータが自動的に削除されるのとは対照的です。

保存容量

localStorageの容量は、多くのブラウザで5MBから10MBに制限されていますが、ブラウザによっては微妙に異なる場合があります。この容量は、クッキーの4KBの制限と比べてはるかに大きいです。

ドメインおよびプロトコルの制限

localStorageは、同一のドメインおよびプロトコル内でのみアクセス可能です。これは、異なるドメインやプロトコルからlocalStorageに保存されたデータへのアクセスを防ぐためのセキュリティ措置です。

localStorageの使用方法

データの保存

ウェブアプリケーションでユーザー情報や設定などのデータを継続的に維持することは、非常に重要です。この時、localStorageは最適な解決策の一つとして、ユーザーのブラウザにキーと値のペア形式で情報を保存します。このデータはウェブページのセッション間でも保持され、ページの再読み込みやブラウザの再起動後も失われません。

JavaScriptのlocalStorageオブジェクトを用いてデータを保存する方法は次の通りです。

javascript
localStorage.setItem('key', 'value');

setItemメソッドは、第一引数にデータを特定するキー、第二引数に実際に保存する値を取ります。この方法で保存されたデータは、ブラウザを閉じても保持されます。

データの取得

localStorageにデータが保存されたら、必要に応じていつでもそのデータを取得できます。データを取得するためには、そのデータのキーを知っている必要があります。

javascript
let data = localStorage.getItem('key');
console.log(data);

getItemメソッドは、キーを引数に取り、そのキーに関連付けられた値を返します。該当するキーに関連する値が存在しない場合、nullが返されます。

データの削除

データストレージで情報を管理する中で、不要な情報や古い情報を削除することは一般的な作業です。localStorageで特定のキーに関連したデータを削除する方法は次の通りです。

javascript
localStorage.removeItem('key');

removeItemメソッドは、指定されたキーに関連付けられたデータを削除します。削除するキーが存在しない場合、何も実行されません。

全データの削除

アプリケーションの特定の時点で、localStorageに保存されたすべてのデータを一括で削除する必要があるかもしれません。その場合のメソッドは次の通りです。

javascript
localStorage.clear();

clearメソッドは、localStorage内の全データを一度に削除します。このメソッドは慎重に使用する必要があります。なぜなら、一度実行すると回復できないデータ損失が発生する可能性があるからです。

localStorageの使用例

localStorageはさまざまなウェブアプリケーションで効果的に使用されています。以下はlocalStorageの活用を示す3つの具体的な例です。

1. ユーザー設定の保持

ウェブサイトやウェブアプリケーションでは、ユーザーがカスタマイズした設定を記憶するためにlocalStorageを利用できます。例えば、ウェブサイトで提供されるダークモード/ライトモードの設定、フォントサイズ、言語の選択などのユーザー設定をlocalStorageに保存し、ユーザーが次回アクセスした際に同じ環境を提供することができます。

javascript
// ユーザー設定の保存
function saveUserSettings(theme, fontSize, language) {
    localStorage.setItem('theme', theme);
    localStorage.setItem('fontSize', fontSize);
    localStorage.setItem('language', language);
}

// 保存された設定の読み込み
function loadUserSettings() {
    const theme = localStorage.getItem('theme');
    const fontSize = localStorage.getItem('fontSize');
    const language = localStorage.getItem('language');
    // この設定をウェブページに適用するコードを追加
}

2. ショッピングカートデータの保存

オンラインショッピングサイトでユーザーがカートに追加した商品を一時的にlocalStorageに保存し、ユーザーがサイトを離れて再度アクセスしたときに以前追加した商品をカートに保持できます。

javascript
// 商品をカートに追加
function addToCart(product) {
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    cart.push(product);
    localStorage.setItem('cart', JSON.stringify(cart));
}

// カートの商品を読み込む
function getCartItems() {
    return JSON.parse(localStorage.getItem('cart')) || [];
}

3. ゲームの進行状況の保存

ウェブベースのゲームでプレイヤーの進行状況、スコア、設定などをlocalStorageに保存し、プレイヤーがゲームを再開した際に以前の進行状況をロードできるようにします。

javascript
// ゲームの進行状況を保存
function saveGameProgress(progress, score) {
    localStorage.setItem('gameProgress', progress);
    localStorage.setItem('gameScore', score);
}

// 保存されたゲームの進行状況を読み込む
function loadGameProgress() {
    const progress = localStorage.getItem('gameProgress');
    const score = localStorage.getItem('gameScore');
    // この進行状況とスコアをゲームに適用するコードを追加
}

このように、localStorageはユーザーエクスペリエンスを向上させる多様な方法でウェブアプリケーションで活用されています。

localStorageの注意点

ウェブ開発において、localStorageは非常に有用なツールとして用いられますが、正しく活用するためにはいくつかの注意点を理解する必要があります。

保存容量の制限

localStorageは、保存できるデータの容量に制限があります。ほとんどのブラウザでは5MB~10MBのデータしか保存できません。したがって、大量のデータの保存には向かないため、必要に応じて他の保存方法を検討する必要があります。

データのセキュリティ

  • localStorageに保存されるデータは暗号化されません。したがって、機密性の高い個人情報や重要なデータの保存は推奨されません。
  • XSS（クロスサイトスクリプティング）のようなセキュリティ脅威が存在します。悪意のあるスクリプトがウェブサイトに挿入されると、localStorageのデータにアクセスすることが可能になるため注意が必要です。

文字列のみの保存

localStorageは文字列のみを保存することができます。したがって、オブジェクトや配列といったデータ構造を直接保存する場合は、JSON.stringify()関数を用いて文字列に変換してから保存し、後でデータを使用する際にはJSON.parse()で元のデータ構造に戻す必要があります。

同期的な動作

localStorageの動作は同期的です。つまり、localStorageに関する処理が行われている間、ウェブアプリケーションの他の処理は一時停止します。そのため、頻繁にデータを参照する場面や大きなデータを処理する場面では、アプリケーションのパフォーマンスに影響を与える可能性があります。

ブラウザのサポート

ほとんどの現代のブラウザはlocalStorageをサポートしています。しかし、非常に古いブラウザや一部の特定のブラウザではサポートされていないこともあります。そのため、ターゲットとなるユーザーのブラウザサポート範囲を確認し、必要に応じてポリフィルなどの対策を検討する必要があります。

ドメインおよびプロトコルの制約

localStorageはウェブページのドメインやプロトコルによって独立して区切られます。したがって、httpとhttpsプロトコルや異なるドメイン間では、localStorageのデータを共有することはできません。

これらの注意点は、localStorageを使用しつつ、データの整合性、セキュリティ、そしてアプリケーションのパフォーマンスを維持するためには絶対に考慮しなければなりません。

localStorageは、ウェブ開発においてクライアントサイドのデータ保存の効率的な方法として広く利用されています。しかしその特性や利点、欠点を正確に理解し、セキュリティ関連の注意点などを必ず把握しておくことが重要です。特に機密性の高い情報の保存には注意が必要であり、大量のデータの処理や迅速な処理が求められる場合には他の代替策を探求することも必要です。ウェブアプリケーションの効率性とユーザーエクスペリエンスを高めるために

、localStorageの正しい活用方法を習得することは、すべてのウェブ開発者にとって重要なスキルとなっています。

© Copyright 2023 CLONE CODING