Web Storage

ウェブストレージ（API & Web機能）

意味ブラウザ内のデータ保存

Web Storageとは？

Web Storageは、ブラウザ内でキーと値を保存するためのAPIです。セッションストレージとローカルストレージの2種類があります。

Web Storageの具体的な使い方

ローカルストレージの使用例

// データの保存
localStorage.setItem('username', 'John Doe');

// データの取得
const username = localStorage.getItem('username');
console.log('保存されたユーザー名:', username);

// データの削除
localStorage.removeItem('username');

// 全てのデータを削除
// localStorage.clear();

👇出力結果

保存されたユーザー名: John Doe

ローカルストレージにデータを保存し、取得、削除する方法を示しています。

セッションストレージの使用例

// セッションストレージにデータを保存
sessionStorage.setItem('cartItems', JSON.stringify(['item1', 'item2', 'item3']));

// データを取得して表示
const cartItems = JSON.parse(sessionStorage.getItem('cartItems'));
console.log('カート内のアイテム:', cartItems);

// セッションストレージ内のアイテム数を表示
console.log('セッションストレージ内のアイテム数:', sessionStorage.length);

👇出力結果

カート内のアイテム: ['item1', 'item2', 'item3']
セッションストレージ内のアイテム数: 1

セッションストレージに配列データを保存し、取得して表示します。また、ストレージ内のアイテム数も表示します。

Web Storageに関するよくある質問

Q. Web Storageとcookieの違いは？

A. Web Storageはcookieよりも大容量のデータを保存でき、サーバーに自動送信されません。また、JavaScriptからのアクセスが簡単で、有効期限の設定が不要です。

Q. ストレージのデータは永続的？

A. localStorageのデータは永続的ですが、sessionStorageのデータはブラウザのタブやウィンドウを閉じると消去されます。

Q. Web Storageのセキュリティは？

A. Web Storageは暗号化されていないため、機密情報の保存には適していません。XSS攻撃にも注意が必要です。

Web Storageが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのWeb StorageやWebSocket、Blob、Service Workers、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。