JavaScriptと`Web Storage`

Articles

この記事ではJavaScriptとWeb Storageについて説明します。

Web Storageは、ブラウザにデータを保存するための強力でシンプルな仕組みであり、主にlocalStorageとsessionStorageの2種類が存在します。それぞれの違いや使い方、実用的なサンプルコードを交えて、段階的に解説していきます。

YouTube Video

javascript-web-storage-iframe.html

  1<!DOCTYPE html>
  2<html>
  3
  4<head>
  5    <title>Web Storage Demo</title>
  6    <style>
  7        * {
  8            box-sizing: border-box;
  9        }
 10
 11        body {
 12            margin: 0;
 13            padding: 1em;
 14            padding-bottom: 10em;
 15            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16            background-color: #f7f9fc;
 17            color: #333;
 18            line-height: 1.6;
 19        }
 20
 21        .container {
 22            max-width: 800px;
 23            margin: 0 auto;
 24            padding: 1em;
 25            background-color: #ffffff;
 26            border: 1px solid #ccc;
 27            border-radius: 10px;
 28            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29        }
 30
 31        .container-flex {
 32            display: flex;
 33            flex-wrap: wrap;
 34            gap: 2em;
 35            max-width: 1000px;
 36            margin: 0 auto;
 37            padding: 1em;
 38            background-color: #ffffff;
 39            border: 1px solid #ccc;
 40            border-radius: 10px;
 41            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42        }
 43
 44        .left-column,
 45        .right-column {
 46            flex: 1 1 200px;
 47            min-width: 200px;
 48        }
 49
 50        h1,
 51        h2 {
 52            font-size: 1.2rem;
 53            color: #007bff;
 54            margin-top: 0.5em;
 55            margin-bottom: 0.5em;
 56            border-left: 5px solid #007bff;
 57            padding-left: 0.6em;
 58            background-color: #e9f2ff;
 59        }
 60
 61        button {
 62            display: block;
 63            margin: 1em auto;
 64            padding: 0.75em 1.5em;
 65            font-size: 1rem;
 66            background-color: #007bff;
 67            color: white;
 68            border: none;
 69            border-radius: 6px;
 70            cursor: pointer;
 71            transition: background-color 0.3s ease;
 72        }
 73
 74        button:hover {
 75            background-color: #0056b3;
 76        }
 77
 78        #output {
 79            margin-top: 1em;
 80            background-color: #1e1e1e;
 81            color: #0f0;
 82            padding: 1em;
 83            border-radius: 8px;
 84            min-height: 200px;
 85            font-family: Consolas, monospace;
 86            font-size: 0.95rem;
 87            overflow-y: auto;
 88            white-space: pre-wrap;
 89        }
 90
 91        .highlight {
 92            outline: 3px solid #ffc107;
 93            /* yellow border */
 94            background-color: #fff8e1;
 95            /* soft yellow background */
 96            transition: background-color 0.3s ease, outline 0.3s ease;
 97        }
 98
 99        .active {
100            background-color: #28a745;
101            /* green background */
102            color: #fff;
103            box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
104            transition: background-color 0.3s ease, box-shadow 0.3s ease;
105        }
106
107        body.dark {
108            background-color: black;
109            color: white;
110        }
111    </style>
112</head>
113
114<body>
115    <button onclick="testLocalStorage()">Test Local Storage</button>
116
117    <script>
118        function testLocalStorage() {
119            // Test operations
120            localStorage.setItem("username", "Alice");     // Save new value
121            localStorage.setItem("username", "Bob");       // Update value
122            localStorage.removeItem("username");           // Remove key
123            localStorage.setItem("theme", "dark");         // Add another key
124            localStorage.clear();                          // Clear all data
125        }
126    </script>
127</body>
128
129</html>

javascript-web-storage.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101
102    body.dark {
103        background-color: black;
104        color: white;
105    }
106  </style>
107</head>
108<body>
109    <div class="container">
110        <h1>JavaScript Console</h1>
111        <button id="executeBtn">Execute</button>
112        <div id="output"></div>
113    </div>
114
115    <div class="container">
116        <h1>IFrame Sample</h1>
117        <iframe src="javascript-web-storage-iframe.html" style="width: 100%;"></iframe>
118    </div>
119
120    <script>
121        // Override console.log to display messages in the #output element
122        (function () {
123            // Override console.log
124            const originalLog = console.log;
125            console.log = function (...args) {
126                originalLog.apply(console, args);
127                const message = document.createElement('div');
128                message.textContent = args.map(String).join(' ');
129                output.appendChild(message);
130            };
131
132            // Override console.error
133            const originalError = console.error;
134            console.error = function (...args) {
135                originalError.apply(console, args);
136                const message = document.createElement('div');
137                message.textContent = args.map(String).join(' ');
138                message.style.color = 'red'; // Color error messages red
139                output.appendChild(message);
140            };
141        })();
142
143        document.getElementById('executeBtn').addEventListener('click', () => {
144            // Prevent multiple loads
145            if (document.getElementById('externalScript')) return;
146
147            const script = document.createElement('script');
148            script.src = 'javascript-web-storage.js';
149            script.id = 'externalScript';
150            //script.onload = () => console.log('javascript-web-storage.js loaded and executed.');
151            //script.onerror = () => console.log('Failed to load javascript-web-storage.js.');
152            document.body.appendChild(script);
153        });
154    </script>
155</body>
156</html>

JavaScriptと`Web Storage`

`Web Storage`とは？

Web Storageは、クライアント側（ユーザーのブラウザ）にデータを保存するためのAPIです。Cookieと違い、Web StorageはHTTPリクエストには送信されず、ストレージ容量も大きいため、より効率的にデータを管理できます。

Web Storageには、用途に応じて使い分けられる2種類の保存領域があります。

localStorage localStorageは、永続的な保存領域です。ブラウザを閉じたり、PCを再起動した後でもデータは保持されます。ユーザー設定やログイン状態など、長期的に保持したいデータに適しています。
sessionStorage sessionStorageは、一時的な保存領域です。同じタブ内でのみ有効で、ページをリロードしてもデータは維持されますが、タブやウィンドウを閉じるとデータは自動的に削除されます。ページ間で一時的な状態を保持したい場合に適しています。

どちらもキーと値のペア（文字列）としてデータを保存します。

基本的な使い方

データの保存

データの保存は次のように行えます。

1// Save data to localStorage
2localStorage.setItem("username", "JohnDoe");
3
4// Save data to sessionStorage
5sessionStorage.setItem("theme", "dark");

setItemメソッドを用いて、localStorageやsessionStorageにキーと値を保存します。

データの取得

データの取得は次のように行えます。

1const username = localStorage.getItem("username");
2console.log(username); // "JohnDoe"
3
4const theme = sessionStorage.getItem("theme");
5console.log(theme); // "dark"

getItem()を使って保存された値を読み出します。

データの削除

データの削除は次のように行えます。

1// Remove a specific key
2localStorage.removeItem("username");
3
4// Clear all data
5sessionStorage.clear();

removeItem()やclear()で保存したデータを削除します。
- removeItem()は、指定したキーに対応するデータだけを削除します。
- clear()は、保存されているすべてのデータを削除します。

オブジェクトの保存と復元

Web Storageは文字列しか保存できません。そのため、オブジェクトを保存する場合はJSON.stringify()で文字列に変換し、読み出すときにJSON.parse()でオブジェクトに戻す必要があります。

 1const user = {
 2    name: "JohnDoe",
 3    age: 30
 4};
 5
 6// Save (serialize)
 7localStorage.setItem("user", JSON.stringify(user));
 8
 9// Retrieve (deserialize)
10const savedUser = JSON.parse(localStorage.getItem("user"));
11console.log(savedUser.name); // "JohnDoe"

オブジェクトをJSON.stringify()で文字列化して保存し、JSON.parse()で復元します。

localStorageとsessionStorageの違いのデモ

 1<!DOCTYPE html>
 2<html>
 3    <head>
 4        <title>Web Storage Demo</title>
 5    </head>
 6    <body>
 7        <input id="input" placeholder="Type your name..." />
 8        <button onclick="saveToLocal()">Save to localStorage</button>
 9        <button onclick="saveToSession()">Save to sessionStorage</button>
10        <button onclick="showValues()">Show Stored Values</button>
11
12        <script>
13            function saveToLocal() {
14                const value = document.getElementById("input").value;
15                localStorage.setItem("name", value);
16                alert("Saved to localStorage");
17            }
18
19            function saveToSession() {
20                const value = document.getElementById("input").value;
21                sessionStorage.setItem("name", value);
22                alert("Saved to sessionStorage");
23            }
24
25            function showValues() {
26                const local = localStorage.getItem("name");
27                const session = sessionStorage.getItem("name");
28
29                alert(`localStorage: ${local}\nsessionStorage: ${session}`);
30            }
31        </script>
32    </body>
33</html>

 1function saveToLocal() {
 2    const value = document.getElementById("input").value;
 3    localStorage.setItem("name", value);
 4    alert("Saved to localStorage");
 5}
 6
 7function saveToSession() {
 8    const value = document.getElementById("input").value;
 9    sessionStorage.setItem("name", value);
10    alert("Saved to sessionStorage");
11}
12
13function showValues() {
14    const local = localStorage.getItem("name");
15    const session = sessionStorage.getItem("name");
16
17    alert(`localStorage: ${local}\nsessionStorage: ${session}`);
18}

このコードは、入力された名前をlocalStorageかsessionStorageに保存し、それぞれの値を確認できるシンプルなデモです。

ストレージイベントの監視

異なるタブで同じlocalStorageにアクセスしている場合、あるタブでデータが変更されたとき、他のタブでstorageイベントを監視できます。

1window.addEventListener("storage", function(event) {
2    console.log("Storage changed!");
3    console.log(`Key: ${event.key}`);
4    console.log(`Old Value: ${event.oldValue}`);
5    console.log(`New Value: ${event.newValue}`);
6});

このイベントはlocalStorageのみ対象であり、sessionStorageでは発生しません。

1// Test operations
2localStorage.setItem("username", "Alice");     // Save new value
3localStorage.setItem("username", "Bob");       // Update value
4localStorage.removeItem("username");           // Remove key
5localStorage.setItem("theme", "dark");         // Add another key
6localStorage.clear();                          // Clear all data

storageイベントは同一タブ内では発火しないため、別タブや別ウィンドウからlocalStorageを変更すると確認できます。

実用例：ダークモードの状態保存

 1<!DOCTYPE html>
 2<html>
 3<head>
 4    <style>
 5        body.dark {
 6            background-color: black;
 7            color: white;
 8        }
 9    </style>
10</head>
11<body>
12    <button onclick="toggleDarkMode()">Toggle Dark Mode</button>
13
14    <script>
15        // Load the initial state
16        if (localStorage.getItem("darkMode") === "true") {
17            document.body.classList.add("dark");
18        }
19
20        function toggleDarkMode() {
21            const isDark = document.body.classList.toggle("dark");
22            localStorage.setItem("darkMode", isDark);
23        }
24    </script>
25</body>
26</html>

 1// Load the initial state
 2if (localStorage.getItem("darkMode") === "true") {
 3    document.body.classList.add("dark");
 4}
 5
 6function toggleDarkMode() {
 7    const isDark = document.body.classList.toggle("dark");
 8    localStorage.setItem("darkMode", isDark);
 9}
10
11toggleDarkMode();

このサンプルでは、ボタンをクリックするたびにダークモードのON/OFFが切り替わり、状態はlocalStorageに保存され、次回アクセス時に復元されます。

容量制限と注意点

Web Storageを利用する際、次の点を考慮できます。

容量制限 ブラウザや環境によって異なりますが、通常は5MB程度です。
セキュリティ JavaScriptから直接アクセスできるため、機密情報の保存には適しません。
データの文字列変換 自動的にすべて文字列として保存されるため、型情報は保持されません。

1localStorage.setItem("isLoggedIn", true);
2console.log(localStorage.getItem("isLoggedIn")); // "true"（as string）

まとめ

Web Storageは、Webアプリケーションにおいてクライアント側にデータを一時的または永続的に保存するための非常に便利な機能です。localStorageとsessionStorageの違いや使い方をしっかり理解し、データの保存・復元に必要なJSON.stringifyとJSON.parseの使い方を覚えることが重要です。適切に活用することで、ユーザー体験の向上に貢献できます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。ぜひYouTubeチャンネルもご覧ください。

YouTube Video

JavaScriptとCookie JavaScriptとIndexedDB

JavaScriptと`Web Storage`

YouTube Video

JavaScriptとWeb Storage

Web Storageとは？

基本的な使い方

データの保存

データの取得

データの削除

オブジェクトの保存と復元

localStorageとsessionStorageの違いのデモ

ストレージイベントの監視

実用例：ダークモードの状態保存

容量制限と注意点

まとめ

YouTube Video

JavaScriptと`Web Storage`

`Web Storage`とは？