4.1 localStorage と sessionStorage
ウェブストレージは、ウェブアプリケーションがユーザーのブラウザにデータを保存するのを可能にしてくれるよ。それは訪問間やページ間のナビゲーション時に保存されるべき情報の保存に便利なんだ。HTML5では、主に2つのタイプのウェブストレージを導入したよ: localStorage と sessionStorage。
localStorage とは何？
localStorageは、ユーザーのブラウザに無期限で保存されるデータストレージだよ。localStorageのデータは、ブラウザを閉じたりコンピュータを再起動してもアクセス可能なまま。セッション間で保存されるべき情報、例えばユーザー設定やショッピングカートのデータの保存に役立つよ。
sessionStorage とは何？
sessionStorageは、ユーザーのブラウザで1セッションの間だけ保存されるデータストレージだよ。sessionStorageのデータは、ブラウザのタブやウィンドウが開かれている間だけアクセス可能なんだ。それは、フォームの一時的なデータやアプリ状態など、1セッション内だけ必要なデータの保存に便利だよ。
主なメソッドとプロパティ
localStorageとsessionStorageのメソッドとプロパティ
両方のウェブストレージタイプにはデータ操作のための同じAPIがあるよ、それは以下のメソッドやプロパティを含むんだ:
setItem(key, value): 指定されたキーで値を保存する。getItem(key): 指定されたキーで保存された値を返す。removeItem(key): 指定されたキーで値を削除する。clear(): ストレージ内の全データをクリアする。key(index): インデックスでキーを返す。length: ストレージ内のキー・値ペアの数を返す。
4.2 使用例
localStorageの使用例:
HTML
<!DOCTYPE html>
<html>
<head>
<title>localStorage Example</title>
</head>
<body>
<h1>localStorage Example</h1>
<input type="text" id="username" placeholder="Enter your username">
<button id="saveButton">Save</button>
<button id="loadButton">Load</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// localStorageに値を保存する
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('Username saved!');
});
// localStorageから値をロードする
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('Username loaded!\n' + `${savedUsername}`);
} else {
alert('No username found.');
}
});
</script>
</body>
</html>
sessionStorageの使用例:
HTML
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h1>sessionStorage Example</h1>
<input type="text" id="sessionData" placeholder="Enter some data">
<button id="saveSessionButton">Save</button>
<button id="loadSessionButton">Load</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// sessionStorageに値を保存する
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('Data saved in session!');
});
// sessionStorageから値をロードする
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('Data loaded from session!\n' + `${savedData}`);
} else {
alert('No data found in session.');
}
});
</script>
</body>
</html>
4.3 localStorage と sessionStorage の比較
localStorage と sessionStorage の違い
- 保存期間:
- localStorage はユーザーまたはスクリプトが明示的に削除するまでデータを無期限で保持するよ。
- sessionStorage は現在のセッション（ブラウザのタブやウィンドウ）中のみデータを保持するよ。
- スコープ:
- localStorage のデータは同じドメインの全てのタブやウィンドウで利用可能だよ。
- sessionStorage のデータは現在のタブやウィンドウでのみ利用可能だよ。
- ストレージサイズ:
- 通常 localStorage と sessionStorage は、ブラウザに依存して1ドメインあたり5〜10MBの制限があるんだ。
localStorageとsessionStorageの使用例の比較:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Comparison Example</title>
</head>
<body>
<script>
// localStorageの使用
localStorage.setItem('persistentData', 'This data persists across sessions');
console.log(localStorage.getItem('persistentData')); // "This data persists across sessions"
// sessionStorageの使用
sessionStorage.setItem('temporaryData', 'This data persists only during the session');
console.log(sessionStorage.getItem('temporaryData')); // "This data persists only during the session"
</script>
</body>
</html>
4.4 使用用途
localStorageを使うとき:
- ユーザー設定やプリフェレンスなどセッション間を通して保存されるべきデータの保存
- 同じドメインの全タブとウィンドウでアクセス可能にしたいデータの保存
- めったに変更されないデータの保存
sessionStorageを使うとき:
- 現在のセッション中だけ必要な一時データの保存
- 特定のタブやウィンドウのためのデータの保存
- タブやウィンドウを閉じる際に削除されるべきデータの保存
セキュリティとプライバシー
ウェブストレージを使う際、安全性とプライバシーに注意を払うことが重要だよ:
- 暗号化: ウェブストレージ内のデータはデフォルトで暗号化されていないよ。もし機密情報を保存する必要があるなら、データを保存前に暗号化することを推奨するよ。
- クロスドメイン攻撃: ウェブストレージは1ドメイン内で動作し、他のドメインからのデータアクセスを防ぐよ。ただし、XSS（クロスサイトスクリプティング）攻撃に備えることが重要だよ。攻撃者がストレージ内のデータにアクセスできないようにしよう。
- データ量の制限: 必要な情報のみを保存し、定期的に古いデータを削除するようにして、ストレージの溢れを避けるようにしよう。
GO TO FULL VERSION