• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width">
6  <meta name="nodejs.org:node-version" content="v14.21.2">
7  <title>Query string | Node.js v14.21.2 Documentation</title>
8  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=fallback">
9  <link rel="stylesheet" href="assets/style.css">
10  <link rel="stylesheet" href="assets/hljs.css">
11  <link rel="canonical" href="https://nodejs.org/api/querystring.html">
12</head>
13<body class="alt apidoc" id="api-section-querystring">
14  <div id="content" class="clearfix">
15    <div id="column2" class="interior">
16      <div id="intro" class="interior">
17        <a href="/" title="Go back to the home page">
18          Node.js
19        </a>
20      </div>
21      <ul>
22<li><a href="documentation.html" class="nav-documentation">About this documentation</a></li>
23<li><a href="synopsis.html" class="nav-synopsis">Usage and example</a></li>
24</ul>
25<hr class="line">
26<ul>
27<li><a href="assert.html" class="nav-assert">Assertion testing</a></li>
28<li><a href="async_hooks.html" class="nav-async_hooks">Async hooks</a></li>
29<li><a href="buffer.html" class="nav-buffer">Buffer</a></li>
30<li><a href="addons.html" class="nav-addons">C++ addons</a></li>
31<li><a href="n-api.html" class="nav-n-api">C/C++ addons with Node-API</a></li>
32<li><a href="embedding.html" class="nav-embedding">C++ embedder API</a></li>
33<li><a href="child_process.html" class="nav-child_process">Child processes</a></li>
34<li><a href="cluster.html" class="nav-cluster">Cluster</a></li>
35<li><a href="cli.html" class="nav-cli">Command-line options</a></li>
36<li><a href="console.html" class="nav-console">Console</a></li>
37<li><a href="corepack.html" class="nav-corepack">Corepack</a></li>
38<li><a href="crypto.html" class="nav-crypto">Crypto</a></li>
39<li><a href="debugger.html" class="nav-debugger">Debugger</a></li>
40<li><a href="deprecations.html" class="nav-deprecations">Deprecated APIs</a></li>
41<li><a href="diagnostics_channel.html" class="nav-diagnostics_channel">Diagnostics Channel</a></li>
42<li><a href="dns.html" class="nav-dns">DNS</a></li>
43<li><a href="domain.html" class="nav-domain">Domain</a></li>
44<li><a href="errors.html" class="nav-errors">Errors</a></li>
45<li><a href="events.html" class="nav-events">Events</a></li>
46<li><a href="fs.html" class="nav-fs">File system</a></li>
47<li><a href="globals.html" class="nav-globals">Globals</a></li>
48<li><a href="http.html" class="nav-http">HTTP</a></li>
49<li><a href="http2.html" class="nav-http2">HTTP/2</a></li>
50<li><a href="https.html" class="nav-https">HTTPS</a></li>
51<li><a href="inspector.html" class="nav-inspector">Inspector</a></li>
52<li><a href="intl.html" class="nav-intl">Internationalization</a></li>
53<li><a href="modules.html" class="nav-modules">Modules: CommonJS modules</a></li>
54<li><a href="esm.html" class="nav-esm">Modules: ECMAScript modules</a></li>
55<li><a href="module.html" class="nav-module">Modules: <code>module</code> API</a></li>
56<li><a href="packages.html" class="nav-packages">Modules: Packages</a></li>
57<li><a href="net.html" class="nav-net">Net</a></li>
58<li><a href="os.html" class="nav-os">OS</a></li>
59<li><a href="path.html" class="nav-path">Path</a></li>
60<li><a href="perf_hooks.html" class="nav-perf_hooks">Performance hooks</a></li>
61<li><a href="policy.html" class="nav-policy">Policies</a></li>
62<li><a href="process.html" class="nav-process">Process</a></li>
63<li><a href="punycode.html" class="nav-punycode">Punycode</a></li>
64<li><a href="querystring.html" class="nav-querystring active">Query strings</a></li>
65<li><a href="readline.html" class="nav-readline">Readline</a></li>
66<li><a href="repl.html" class="nav-repl">REPL</a></li>
67<li><a href="report.html" class="nav-report">Report</a></li>
68<li><a href="stream.html" class="nav-stream">Stream</a></li>
69<li><a href="string_decoder.html" class="nav-string_decoder">String decoder</a></li>
70<li><a href="timers.html" class="nav-timers">Timers</a></li>
71<li><a href="tls.html" class="nav-tls">TLS/SSL</a></li>
72<li><a href="tracing.html" class="nav-tracing">Trace events</a></li>
73<li><a href="tty.html" class="nav-tty">TTY</a></li>
74<li><a href="dgram.html" class="nav-dgram">UDP/datagram</a></li>
75<li><a href="url.html" class="nav-url">URL</a></li>
76<li><a href="util.html" class="nav-util">Utilities</a></li>
77<li><a href="v8.html" class="nav-v8">V8</a></li>
78<li><a href="vm.html" class="nav-vm">VM</a></li>
79<li><a href="wasi.html" class="nav-wasi">WASI</a></li>
80<li><a href="worker_threads.html" class="nav-worker_threads">Worker threads</a></li>
81<li><a href="zlib.html" class="nav-zlib">Zlib</a></li>
82</ul>
83<hr class="line">
84<ul>
85<li><a href="https://github.com/nodejs/node" class="nav-https-github-com-nodejs-node">Code repository and issue tracker</a></li>
86</ul>
87    </div>
88
89    <div id="column1" data-id="querystring" class="interior">
90      <header>
91        <div class="header-container">
92          <h1>Node.js v14.21.2 documentation</h1>
93          <button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle dark mode/light mode" aria-label="Toggle dark mode/light mode" hidden>
94            <svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" height="24" width="24">
95              <path fill="none" d="M0 0h24v24H0z" />
96              <path d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15A4.01 4.01 0 0111 18c0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"/>
97              <path d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"/>
98            </svg>
99            <svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" height="24" width="24">
100              <path d="M0 0h24v24H0z" fill="none" />
101              <path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/>
102            </svg>
103          </button>
104        </div>
105        <div id="gtoc">
106          <ul>
107            <li>
108              <a href="index.html">Index</a>
109            </li>
110            <li>
111              <a href="all.html">View on single page</a>
112            </li>
113            <li>
114              <a href="querystring.json">View as JSON</a>
115            </li>
116
117    <li class="version-picker">
118      <a href="#">View another version <span>&#x25bc;</span></a>
119      <ol class="version-picker"><li><a href="https://nodejs.org/docs/latest-v19.x/api/querystring.html">19.x</a></li>
120<li><a href="https://nodejs.org/docs/latest-v18.x/api/querystring.html">18.x <b>LTS</b></a></li>
121<li><a href="https://nodejs.org/docs/latest-v17.x/api/querystring.html">17.x</a></li>
122<li><a href="https://nodejs.org/docs/latest-v16.x/api/querystring.html">16.x <b>LTS</b></a></li>
123<li><a href="https://nodejs.org/docs/latest-v15.x/api/querystring.html">15.x</a></li>
124<li><a href="https://nodejs.org/docs/latest-v14.x/api/querystring.html">14.x <b>LTS</b></a></li>
125<li><a href="https://nodejs.org/docs/latest-v13.x/api/querystring.html">13.x</a></li>
126<li><a href="https://nodejs.org/docs/latest-v12.x/api/querystring.html">12.x</a></li>
127<li><a href="https://nodejs.org/docs/latest-v11.x/api/querystring.html">11.x</a></li>
128<li><a href="https://nodejs.org/docs/latest-v10.x/api/querystring.html">10.x</a></li>
129<li><a href="https://nodejs.org/docs/latest-v9.x/api/querystring.html">9.x</a></li>
130<li><a href="https://nodejs.org/docs/latest-v8.x/api/querystring.html">8.x</a></li>
131<li><a href="https://nodejs.org/docs/latest-v7.x/api/querystring.html">7.x</a></li>
132<li><a href="https://nodejs.org/docs/latest-v6.x/api/querystring.html">6.x</a></li>
133<li><a href="https://nodejs.org/docs/latest-v5.x/api/querystring.html">5.x</a></li>
134<li><a href="https://nodejs.org/docs/latest-v4.x/api/querystring.html">4.x</a></li>
135<li><a href="https://nodejs.org/docs/latest-v0.12.x/api/querystring.html">0.12.x</a></li>
136<li><a href="https://nodejs.org/docs/latest-v0.10.x/api/querystring.html">0.10.x</a></li></ol>
137    </li>
138
139            <li class="edit_on_github"><a href="https://github.com/nodejs/node/edit/master/doc/api/querystring.md">Edit on GitHub</a></li>
140          </ul>
141        </div>
142        <hr>
143      </header>
144
145      <details id="toc" open><summary>Table of contents</summary><ul>
146<li><span class="stability_3"><a href="#querystring_query_string">Query string</a></span>
147<ul>
148<li><a href="#querystring_querystring_decode"><code>querystring.decode()</code></a></li>
149<li><a href="#querystring_querystring_encode"><code>querystring.encode()</code></a></li>
150<li><a href="#querystring_querystring_escape_str"><code>querystring.escape(str)</code></a></li>
151<li><a href="#querystring_querystring_parse_str_sep_eq_options"><code>querystring.parse(str[, sep[, eq[, options]]])</code></a></li>
152<li><a href="#querystring_querystring_stringify_obj_sep_eq_options"><code>querystring.stringify(obj[, sep[, eq[, options]]])</code></a></li>
153<li><a href="#querystring_querystring_unescape_str"><code>querystring.unescape(str)</code></a></li>
154</ul>
155</li>
156</ul></details>
157
158      <div id="apicontent">
159        <h2>Query string<span><a class="mark" href="#querystring_query_string" id="querystring_query_string">#</a></span></h2>
160
161<p></p><div class="api_stability api_stability_3"><a href="documentation.html#documentation_stability_index">Stability: 3</a> - Legacy</div><p></p>
162
163<p><strong>Source Code:</strong> <a href="https://github.com/nodejs/node/blob/v14.21.2/lib/querystring.js">lib/querystring.js</a></p>
164<p>The <code>querystring</code> module provides utilities for parsing and formatting URL
165query strings. It can be accessed using:</p>
166<pre><code class="language-js"><span class="hljs-keyword">const</span> querystring = <span class="hljs-built_in">require</span>(<span class="hljs-string">'querystring'</span>);</code></pre>
167<p>The <code>querystring</code> API is considered Legacy. While it is still maintained,
168new code should use the <a href="url.html#url_class_urlsearchparams" class="type">&#x3C;URLSearchParams></a> API instead.</p>
169<section><h3><code>querystring.decode()</code><span><a class="mark" href="#querystring_querystring_decode" id="querystring_querystring_decode">#</a></span></h3>
170<div class="api_metadata">
171<span>Added in: v0.1.99</span>
172</div>
173<p>The <code>querystring.decode()</code> function is an alias for <code>querystring.parse()</code>.</p>
174</section><section><h3><code>querystring.encode()</code><span><a class="mark" href="#querystring_querystring_encode" id="querystring_querystring_encode">#</a></span></h3>
175<div class="api_metadata">
176<span>Added in: v0.1.99</span>
177</div>
178<p>The <code>querystring.encode()</code> function is an alias for <code>querystring.stringify()</code>.</p>
179</section><section><h3><code>querystring.escape(str)</code><span><a class="mark" href="#querystring_querystring_escape_str" id="querystring_querystring_escape_str">#</a></span></h3>
180<div class="api_metadata">
181<span>Added in: v0.1.25</span>
182</div>
183<ul>
184<li><code>str</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type" class="type">&#x3C;string></a></li>
185</ul>
186<p>The <code>querystring.escape()</code> method performs URL percent-encoding on the given
187<code>str</code> in a manner that is optimized for the specific requirements of URL
188query strings.</p>
189<p>The <code>querystring.escape()</code> method is used by <code>querystring.stringify()</code> and is
190generally not expected to be used directly. It is exported primarily to allow
191application code to provide a replacement percent-encoding implementation if
192necessary by assigning <code>querystring.escape</code> to an alternative function.</p>
193</section><section><h3><code>querystring.parse(str[, sep[, eq[, options]]])</code><span><a class="mark" href="#querystring_querystring_parse_str_sep_eq_options" id="querystring_querystring_parse_str_sep_eq_options">#</a></span></h3>
194<div class="api_metadata">
195<details class="changelog"><summary>History</summary>
196<table>
197<tbody><tr><th>Version</th><th>Changes</th></tr>
198<tr><td>v8.0.0</td>
199<td><p>Multiple empty entries are now parsed correctly (e.g. <code>&#x26;=&#x26;=</code>).</p></td></tr>
200<tr><td>v6.0.0</td>
201<td><p>The returned object no longer inherits from <code>Object.prototype</code>.</p></td></tr>
202<tr><td>v6.0.0, v4.2.4</td>
203<td><p>The <code>eq</code> parameter may now have a length of more than <code>1</code>.</p></td></tr>
204<tr><td>v0.1.25</td>
205<td><p><span>Added in: v0.1.25</span></p></td></tr>
206</tbody></table>
207</details>
208</div>
209<ul>
210<li><code>str</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type" class="type">&#x3C;string></a> The URL query string to parse</li>
211<li><code>sep</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type" class="type">&#x3C;string></a> The substring used to delimit key and value pairs in the
212query string. <strong>Default:</strong> <code>'&#x26;'</code>.</li>
213<li><code>eq</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type" class="type">&#x3C;string></a>. The substring used to delimit keys and values in the
214query string. <strong>Default:</strong> <code>'='</code>.</li>
215<li><code>options</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type">&#x3C;Object></a>
216<ul>
217<li><code>decodeURIComponent</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type">&#x3C;Function></a> The function to use when decoding
218percent-encoded characters in the query string. <strong>Default:</strong>
219<code>querystring.unescape()</code>.</li>
220<li><code>maxKeys</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type" class="type">&#x3C;number></a> Specifies the maximum number of keys to parse.
221Specify <code>0</code> to remove key counting limitations. <strong>Default:</strong> <code>1000</code>.</li>
222</ul>
223</li>
224</ul>
225<p>The <code>querystring.parse()</code> method parses a URL query string (<code>str</code>) into a
226collection of key and value pairs.</p>
227<p>For example, the query string <code>'foo=bar&#x26;abc=xyz&#x26;abc=123'</code> is parsed into:</p>
228<!-- eslint-skip -->
229<pre><code class="language-js">{
230  <span class="hljs-attr">foo</span>: <span class="hljs-string">'bar'</span>,
231  <span class="hljs-attr">abc</span>: [<span class="hljs-string">'xyz'</span>, <span class="hljs-string">'123'</span>]
232}</code></pre>
233<p>The object returned by the <code>querystring.parse()</code> method <em>does not</em>
234prototypically inherit from the JavaScript <code>Object</code>. This means that typical
235<code>Object</code> methods such as <code>obj.toString()</code>, <code>obj.hasOwnProperty()</code>, and others
236are not defined and <em>will not work</em>.</p>
237<p>By default, percent-encoded characters within the query string will be assumed
238to use UTF-8 encoding. If an alternative character encoding is used, then an
239alternative <code>decodeURIComponent</code> option will need to be specified:</p>
240<pre><code class="language-js"><span class="hljs-comment">// Assuming gbkDecodeURIComponent function already exists...</span>
241
242querystring.<span class="hljs-title function_">parse</span>(<span class="hljs-string">'w=%D6%D0%CE%C4&#x26;foo=bar'</span>, <span class="hljs-literal">null</span>, <span class="hljs-literal">null</span>,
243                  { <span class="hljs-attr">decodeURIComponent</span>: gbkDecodeURIComponent });</code></pre>
244</section><section><h3><code>querystring.stringify(obj[, sep[, eq[, options]]])</code><span><a class="mark" href="#querystring_querystring_stringify_obj_sep_eq_options" id="querystring_querystring_stringify_obj_sep_eq_options">#</a></span></h3>
245<div class="api_metadata">
246<span>Added in: v0.1.25</span>
247</div>
248<ul>
249<li><code>obj</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type">&#x3C;Object></a> The object to serialize into a URL query string</li>
250<li><code>sep</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type" class="type">&#x3C;string></a> The substring used to delimit key and value pairs in the
251query string. <strong>Default:</strong> <code>'&#x26;'</code>.</li>
252<li><code>eq</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type" class="type">&#x3C;string></a>. The substring used to delimit keys and values in the
253query string. <strong>Default:</strong> <code>'='</code>.</li>
254<li><code>options</code>
255<ul>
256<li><code>encodeURIComponent</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type">&#x3C;Function></a> The function to use when converting
257URL-unsafe characters to percent-encoding in the query string. <strong>Default:</strong>
258<code>querystring.escape()</code>.</li>
259</ul>
260</li>
261</ul>
262<p>The <code>querystring.stringify()</code> method produces a URL query string from a
263given <code>obj</code> by iterating through the object's "own properties".</p>
264<p>It serializes the following types of values passed in <code>obj</code>:
265<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type" class="type">&#x3C;string></a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type" class="type">&#x3C;number></a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt" class="type">&#x3C;bigint></a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type" class="type">&#x3C;boolean></a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type" class="type">&#x3C;string[]></a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type" class="type">&#x3C;number[]></a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt" class="type">&#x3C;bigint[]></a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type" class="type">&#x3C;boolean[]></a>
266The numeric values must be finite. Any other input values will be coerced to
267empty strings.</p>
268<pre><code class="language-js">querystring.<span class="hljs-title function_">stringify</span>({ <span class="hljs-attr">foo</span>: <span class="hljs-string">'bar'</span>, <span class="hljs-attr">baz</span>: [<span class="hljs-string">'qux'</span>, <span class="hljs-string">'quux'</span>], <span class="hljs-attr">corge</span>: <span class="hljs-string">''</span> });
269<span class="hljs-comment">// Returns 'foo=bar&#x26;baz=qux&#x26;baz=quux&#x26;corge='</span>
270
271querystring.<span class="hljs-title function_">stringify</span>({ <span class="hljs-attr">foo</span>: <span class="hljs-string">'bar'</span>, <span class="hljs-attr">baz</span>: <span class="hljs-string">'qux'</span> }, <span class="hljs-string">';'</span>, <span class="hljs-string">':'</span>);
272<span class="hljs-comment">// Returns 'foo:bar;baz:qux'</span></code></pre>
273<p>By default, characters requiring percent-encoding within the query string will
274be encoded as UTF-8. If an alternative encoding is required, then an alternative
275<code>encodeURIComponent</code> option will need to be specified:</p>
276<pre><code class="language-js"><span class="hljs-comment">// Assuming gbkEncodeURIComponent function already exists,</span>
277
278querystring.<span class="hljs-title function_">stringify</span>({ <span class="hljs-attr">w</span>: <span class="hljs-string">'中文'</span>, <span class="hljs-attr">foo</span>: <span class="hljs-string">'bar'</span> }, <span class="hljs-literal">null</span>, <span class="hljs-literal">null</span>,
279                      { <span class="hljs-attr">encodeURIComponent</span>: gbkEncodeURIComponent });</code></pre>
280</section><section><h3><code>querystring.unescape(str)</code><span><a class="mark" href="#querystring_querystring_unescape_str" id="querystring_querystring_unescape_str">#</a></span></h3>
281<div class="api_metadata">
282<span>Added in: v0.1.25</span>
283</div>
284<ul>
285<li><code>str</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type" class="type">&#x3C;string></a></li>
286</ul>
287<p>The <code>querystring.unescape()</code> method performs decoding of URL percent-encoded
288characters on the given <code>str</code>.</p>
289<p>The <code>querystring.unescape()</code> method is used by <code>querystring.parse()</code> and is
290generally not expected to be used directly. It is exported primarily to allow
291application code to provide a replacement decoding implementation if
292necessary by assigning <code>querystring.unescape</code> to an alternative function.</p>
293<p>By default, the <code>querystring.unescape()</code> method will attempt to use the
294JavaScript built-in <code>decodeURIComponent()</code> method to decode. If that fails,
295a safer equivalent that does not throw on malformed URLs will be used.</p></section>
296        <!-- API END -->
297      </div>
298    </div>
299  </div>
300  <script>
301    'use strict';
302    {
303      const kCustomPreference = 'customDarkTheme';
304      const userSettings = sessionStorage.getItem(kCustomPreference);
305      const themeToggleButton = document.getElementById('theme-toggle-btn');
306      if (userSettings === null && window.matchMedia) {
307        const mq = window.matchMedia('(prefers-color-scheme: dark)');
308        if ('onchange' in mq) {
309          function mqChangeListener(e) {
310            document.body.classList.toggle('dark-mode', e.matches);
311          }
312          mq.addEventListener('change', mqChangeListener);
313          if (themeToggleButton) {
314            themeToggleButton.addEventListener('click', function() {
315              mq.removeEventListener('change', mqChangeListener);
316            }, { once: true });
317          }
318        }
319        if (mq.matches) {
320          document.body.classList.add('dark-mode');
321        }
322      } else if (userSettings === 'true') {
323        document.body.classList.add('dark-mode');
324      }
325      if (themeToggleButton) {
326        themeToggleButton.hidden = false;
327        themeToggleButton.addEventListener('click', function() {
328          sessionStorage.setItem(
329            kCustomPreference,
330            document.body.classList.toggle('dark-mode')
331          );
332        });
333      }
334    }
335  </script>
336</body>
337</html>
338