JS_localstorage

14localstorage

JavaScriptにおけるlocalStorageは、Webページのデータをブラウザに長期間保存するための機能です。
これにより、ユーザーがブラウザを閉じた後やコンピューターを再起動した後でも、データを保持することができます。
localStorageはキーと値のペアでデータを保存し、そのデータは同じオリジン（同じプロトコル、ドメイン、ポート）のページ間で共有されます。

localStorage.setItem('userName', '太郎');

格納された値はデベロッパーツールで確認することができます。

14-1 基本的な使用方法

localStorageにデータを保存する際、主に以下のメソッドが使用されます。

setItem(key, value)

localStorageにデータを保存します。keyにはデータを識別するための名前を、valueには保存したいデータ（文字列形式）を指定します。

localStorage.setItem('userName', '太郎');

getItem(key)

localStorageからデータを取得します。keyには取得したいデータの名前を指定します。該当するキーが存在しない場合、nullが返されます。

let userName = localStorage.getItem('userName');
console.log(userName); // 出力: 太郎

removeItem(key)

localStorageから特定のデータを削除します。keyには削除したいデータの名前を指定します。

localStorage.removeItem('userName');

clear()

localStorageに保存されているすべてのデータを削除します。

localStorage.clear();

14-2 利用できるメソッド(その他)

• key(n):localStorageに保存されているn番目のキーを取得します。これは、localStorage内のすべてのキーをループ処理する際に便利です。
• length:localStorageに保存されているキー/値ペアの総数を取得します。

14-3 注意点

• localStorageに保存できるデータは文字列形式のみです。オブジェクトや配列を保存する場合は、JSON.stringify()を使用して文字列に変換する必要があります。逆に、取得したデータをオブジェクトや配列として扱いたい場合は、JSON.parse()を使用して元の形式に戻します。
• localStorageの容量は、ブラウザによって異なりますが、一般的には5MB〜10MB程度です。
• セキュリティの観点から、機密情報はlocalStorageに保存しない方が良いです。

localStorageは、ユーザー設定の保存や、セッション間でのデータ保持など、さまざまな用途に役立ちます。ただし、データの量やセキュリティの