HTML Web Storage

Last modified on: October 20, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-[20px] text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="47c7e519-6781-46a2-9280-57cda269c129">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>HTML Web Storage</h3>
<p>The HTML Web Storage API allows you to store data on the client side, providing two storage mechanisms: <code>localStorage</code> and <code>sessionStorage</code>. This API is useful for saving user preferences, session data, or other information that should persist across page reloads or during a session.</p>
<h3>Key Components</h3>
<ol>
<li><strong><code>localStorage</code></strong>: Stores data with no expiration date. Data persists even when the browser is closed and reopened.</li>
<li><strong><code>sessionStorage</code></strong>: Stores data for the duration of the page session. Data is lost when the page session ends (e.g., when the browser tab or window is closed).</li>
</ol>
<h3>Basic Usage</h3>
<h4><strong>Setting and Getting Data</strong></h4>
<ul>
<li>
<p><strong><code>localStorage</code></strong>:</p>
<ul>
<li><strong>Set Item</strong>: <code>localStorage.setItem('key', 'value')</code></li>
<li><strong>Get Item</strong>: <code>localStorage.getItem('key')</code></li>
<li><strong>Remove Item</strong>: <code>localStorage.removeItem('key')</code></li>
<li><strong>Clear All</strong>: <code>localStorage.clear()</code></li>
</ul>
</li>
<li>
<p><strong><code>sessionStorage</code></strong>:</p>
<ul>
<li><strong>Set Item</strong>: <code>sessionStorage.setItem('key', 'value')</code></li>
<li><strong>Get Item</strong>: <code>sessionStorage.getItem('key')</code></li>
<li><strong>Remove Item</strong>: <code>sessionStorage.removeItem('key')</code></li>
<li><strong>Clear All</strong>: <code>sessionStorage.clear()</code></li>
</ul>
</li>
</ul>
<h4><strong>Example</strong></h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Web Storage Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Web Storage Example&lt;/h1&gt;
  &lt;p id="localStorageData"&gt;&lt;/p&gt;
  &lt;p id="sessionStorageData"&gt;&lt;/p&gt;

&lt;button onclick="saveData()"&gt;Save Data&lt;/button&gt;
  &lt;button onclick="loadData()"&gt;Load Data&lt;/button&gt;
  &lt;button onclick="clearData()"&gt;Clear Data&lt;/button&gt;

&lt;script&gt;
    // Save data to localStorage and sessionStorage
    function saveData() {
      localStorage.setItem('username', 'JohnDoe');
      sessionStorage.setItem('sessionId', '123456');
      alert('Data saved!');
    }

// Load data from localStorage and sessionStorage
    function loadData() {
      const username = localStorage.getItem('username');
      const sessionId = sessionStorage.getItem('sessionId');
      document.getElementById('localStorageData').textContent = `Username (localStorage): ${username}`;
      document.getElementById('sessionStorageData').textContent = `Session ID (sessionStorage): ${sessionId}`;
    }

// Clear data from localStorage and sessionStorage
    function clearData() {
      localStorage.removeItem('username');
      sessionStorage.removeItem('sessionId');
      document.getElementById('localStorageData').textContent = '';
      document.getElementById('sessionStorageData').textContent = '';
      alert('Data cleared!');
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>Storage Limits</h3>
<ul>
<li><strong><code>localStorage</code></strong>: Typically has a storage limit of about 5MB per domain, though this can vary between browsers.</li>
<li><strong><code>sessionStorage</code></strong>: Similar storage limits to <code>localStorage</code>, but data is only valid for the session.</li>
</ul>
<h3>Data Types</h3>
<ul>
<li>
<p><strong>String Data</strong>: Web Storage only stores string data. To store other data types (e.g., objects), you need to serialize them to JSON strings using <code>JSON.stringify()</code> and parse them back using <code>JSON.parse()</code>.</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>// Storing an object
const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// Retrieving an object
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Outputs: John
</code></pre>
</div>
</div>
</li>
</ul>
<h3>Security and Privacy</h3>
<ul>
<li><strong>Same-Origin Policy</strong>: Data stored in Web Storage is accessible only to scripts running on the same origin (protocol, domain, and port).</li>
<li><strong>Sensitive Data</strong>: Avoid storing sensitive information (e.g., passwords) in Web Storage due to potential security risks.</li>
</ul>
<h3>Conclusion</h3>
<p>The HTML Web Storage API provides a straightforward way to store data on the client side, offering both persistent storage (<code>localStorage</code>) and session-based storage (<code>sessionStorage</code>). It is useful for enhancing user experiences by maintaining user preferences and session data. Understanding and using Web Storage effectively can lead to more responsive and personalized web applications.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More