HTML - Web Storage

Ethan D. - May 24, 2024

Types of Web Storage

There are two types of web storage: Local Storage and Session Storage. Both let you store key-value pairs in the browser, but they have different lifetimes and scopes.

Local Storage

Local Storage is a web storage type that lets you store data in the browser with no expiration date. The data stored in Local Storage will stay in the browser even after the browser window is closed. This makes it useful for storing data that needs to stay around for a longer time.

To store data in Local Storage, you can use the localStorage object.

Example: Storing a value in Local Storage

localStorage.setItem('username', 'JohnDoe');

We're storing a key-value pair where the key is 'username' and the value is 'JohnDoe'. To get the stored data, you can use the getItem() method:

Example: Getting a value from Local Storage

const username = localStorage.getItem('username');
console.log(username); // Output: 'JohnDoe'

You can also change the value of a stored item by using setItem() again with the same key and a new value:

Example: Changing a value in Local Storage

localStorage.setItem('username', 'JaneSmith');

Session Storage

Session Storage is another web storage type that lets you store data for a single session. The data stored in Session Storage will stay in the browser only until the browser window or tab is closed. Once the session ends, the data is cleared.

To store data in Session Storage, you can use the sessionStorage object, which has the same methods as localStorage.

Example: Storing a value in Session Storage

sessionStorage.setItem('theme', 'dark');

We're storing a key-value pair where the key is 'theme' and the value is 'dark'. To get the stored data, you can use the getItem() method:

Example: Getting a value from Session Storage

const theme = sessionStorage.getItem('theme');
console.log(theme); // Output: 'dark'

You can change the stored data in Session Storage in the same way as Local Storage, using the setItem() method with the same key and a new value:

Example: Changing a value in Session Storage

sessionStorage.setItem('theme', 'light');

Both Local Storage and Session Storage have their own uses based on the lifetime and scope of the data you want to store. Local Storage is good for storing data that needs to stay around even after the browser is closed, while Session Storage is useful for storing data specific to a single session or page.

Working with Web Storage

Web Storage provides methods to store, get, and remove data in the browser. Let's look at how to work with data in both Local Storage and Session Storage.

Storing Data

To store data in Web Storage, you can use the setItem() method. This method takes two arguments: the key (a string) and the value you want to store.

You can store different data types in Web Storage, such as strings, numbers, and objects. When storing objects, you need to convert them to a string using JSON.stringify() before storing.

Example: Storing a string and an object in Local Storage

// Storing a string
localStorage.setItem('username', 'JohnDoe');

// Storing an object
const user = {
  name: 'John Doe',
  age: 25,
  email: 'john@example.com'
};
localStorage.setItem('user', JSON.stringify(user));

Getting Data

To get data from Web Storage, you can use the getItem() method. This method takes one argument: the key of the data you want to get.

If the data stored is a string, you can use it directly. However, if you stored an object, you need to parse it back into an object using JSON.parse().

Example: Getting data from Local Storage

// Getting a string
const username = localStorage.getItem('username');
console.log(username); // Output: 'JohnDoe'

// Getting an object
const userString = localStorage.getItem('user');
const user = JSON.parse(userString);
console.log(user.name); // Output: 'John Doe'
console.log(user.age); // Output: 25
console.log(user.email); // Output: 'john@example.com'

Removing Data

To remove data from Web Storage, you have two options:

Option	Description
`removeItem()`	Removes a specific key-value pair
`clear()`	Removes all data stored in Web Storage

Example: Removing data from Local Storage

// Removing a specific item
localStorage.removeItem('username');

// Removing all data
localStorage.clear();

The same methods (setItem(), getItem(), removeItem(), and clear()) can be used with Session Storage by replacing localStorage with sessionStorage.

Remember that data stored in Web Storage is specific to the domain. Each domain has its own separate storage space, and JavaScript from one domain cannot access data stored by another domain.

Web Storage Events

Web Storage gives events that let you react to changes in the stored data. These events are triggered when data is stored, changed, or removed in either Local Storage or Session Storage.

The storage event is fired whenever a change happens in Web Storage. This event is triggered on the window object of all pages from the same origin that have access to the storage area. The event object passed to the event listener contains useful properties such as:

Property	Description
`key`	The key of the item that was changed (added, updated, or removed).
`oldValue`	The old value of the item before the change (null if a new item was added).
`newValue`	The new value of the item after the change (null if an item was removed).
`url`	The URL of the page that made the change.
`storageArea`	The storage object (localStorage or sessionStorage) that was affected.

To handle storage events, you can use the addEventListener() method on the window object.

Example: Handling Storage Events

window.addEventListener('storage', function(event) {
  console.log('Storage event triggered');
  console.log('Key:', event.key);
  console.log('Old value:', event.oldValue);
  console.log('New value:', event.newValue);
  console.log('URL:', event.url);
  console.log('Storage area:', event.storageArea);
});

It's important to note that the storage event is not triggered in the same page that made the change. It is only triggered in other pages from the same origin that have access to the storage area. This allows for communication between different pages or tabs of your application.

Example: Syncing Data Between Pages

// Page 1
localStorage.setItem('theme', 'dark');

// Page 2
window.addEventListener('storage', function(event) {
  if (event.key === 'theme') {
    document.body.className = event.newValue;
  }
});

Page 1 sets the value of the 'theme' key in Local Storage. Page 2 listens for storage events and checks if the changed key is 'theme'. If it is, it updates the <body> element's class name to the new value, applying the theme change.

Storage events give a way to react to changes in Web Storage and enable communication and synchronization between different pages or tabs of your application. They can be used for various purposes, such as syncing user preferences, updating displayed data in real-time, or triggering certain actions based on stored data changes.

Web Storage Security

When using Web Storage (Local Storage and Session Storage) to store data in the browser, you should consider security to protect your application and user data from unauthorized access or attacks.

One of the main security risks associated with Web Storage is cross-site scripting (XSS) attacks. XSS attacks occur when malicious scripts are injected into your application and run in the context of your page. If you store sensitive data in Web Storage without proper security measures, an attacker could access and steal that data.

To prevent XSS attacks, you should always validate and sanitize any user input before storing it in Web Storage. This means checking the input for any malicious characters or scripts and removing or encoding them. You can use libraries or frameworks that provide built-in input validation and sanitization functions to help with this process.

Example: Sanitize User Input

function sanitizeInput(input) {
  // Remove any HTML tags and special characters
  return input.replace(/<[^>]*>?/gm, '').replace(/[^\w\s]/gi, '');
}

const userInput = '<script>alert("XSS Attack!");</script>';
const sanitizedInput = sanitizeInput(userInput);
localStorage.setItem('userInput', sanitizedInput);

Another security consideration is encrypting sensitive data before storing it in Web Storage. While Web Storage data is not directly accessible by other websites, it can still be read by anyone who has access to the user's device or browser. Encrypting the data adds an extra layer of protection.

To encrypt data, you can use encryption algorithms like AES (Advanced Encryption Standard) or libraries that provide encryption functions. Before storing sensitive data, encrypt it with a secure encryption key. When retrieving the data, decrypt it using the same key.

Example: Encrypt and Decrypt Data

function encryptData(data, key) {
  // Implement encryption logic using a library or algorithm
  // Example using a simple substitution cipher
  const encryptedData = data.split('').map(char => String.fromCharCode(char.charCodeAt(0) + key)).join('');
  return encryptedData;
}

function decryptData(encryptedData, key) {
  // Implement decryption logic using a library or algorithm
  // Example using a simple substitution cipher
  const decryptedData = encryptedData.split('').map(char => String.fromCharCode(char.charCodeAt(0) - key)).join('');
  return decryptedData;
}

const sensitiveData = 'Secret Data';
const encryptionKey = 3;
const encryptedData = encryptData(sensitiveData, encryptionKey);
localStorage.setItem('sensitiveData', encryptedData);

// Retrieving and decrypting the data
const storedEncryptedData = localStorage.getItem('sensitiveData');
const decryptedData = decryptData(storedEncryptedData, encryptionKey);
console.log(decryptedData); // Output: 'Secret Data'

It's important to choose a secure encryption key and keep it safe. Avoid storing the encryption key in the same place as the encrypted data, as it would defeat the purpose of encryption.

Also, be careful about the data you store in Web Storage. Avoid storing highly sensitive information like passwords, credit card numbers, or personal identification numbers (PINs) in Web Storage, even if encrypted. It's generally safer to store such sensitive data on the server-side and use secure communication protocols like HTTPS to transmit the data.

Browser Support and Limitations

Web Storage (Local Storage and Session Storage) is supported by modern web browsers. However, it's important to know about browser compatibility and storage limits when using Web Storage in your web applications.

Most modern browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer (version 8 and above), support Web Storage. They let you store and get data using the localStorage and sessionStorage objects without any major issues.

However, there are some older browser versions or less common browsers that may have limited or no support for Web Storage. It's a good idea to check the browser compatibility of the Web Storage features you plan to use. You can check online resources like Can I Use to see the browser support matrix for Web Storage.

When using Web Storage, you should also know about storage limits and quotas. Each browser has its own storage limits for Web Storage. The exact limit can change based on the browser and the device.

Browser	Approximate Storage Limit
Chrome	5MB per origin
Firefox	5MB per origin
Safari	5MB per origin
Internet Explorer	10MB per origin

These limits are per origin, which means that each domain (or subdomain) has its own separate storage limit. If your application needs to store a lot of data, you should check the available storage space and handle storage limit exceptions carefully.

To check the available storage space, you can use the StorageManager API in modern browsers. It provides methods like estimate() to get an estimate of the available storage space.

Example: Checking Available Storage Space

if (navigator.storage && navigator.storage.estimate) {
  navigator.storage.estimate().then(({ usage, quota }) => {
    console.log(`Using ${usage} out of ${quota} bytes.`);
  });
} else {
  console.log('StorageManager API not supported.');
}

If you try to store data that is more than the available storage quota, a QuotaExceededError will be thrown. You should catch and handle this error to provide a fallback or notify the user.

Example: Handling Storage Limit Exceptions

try {
  localStorage.setItem('key', 'value');
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.log('Storage limit exceeded. Cannot store more data.');
    // Handle the error, e.g., by removing unused data or notifying the user
  } else {
    console.log('An error occurred while storing data:', e);
  }
}

When dealing with storage limits, you can think about using strategies like data compression, selective data storage, or using server-side storage for larger datasets. It's also good to regularly clean up unnecessary data from Web Storage to free up space.

Keep in mind that Web Storage is specific to each browser. Data stored in one browser will not be available in another browser or on a different device. If you need to store data that should be available across different browsers or devices, you may need to think about other storage options like server-side storage or cloud storage solutions.

Practical Examples and Use Cases

Web Storage (Local Storage and Session Storage) has many uses in web development. Here are some common examples and use cases where Web Storage can improve user experience and application functionality.

Storing User Preferences and Settings

Web Storage is a way to store user preferences and settings. You can use Local Storage to save things like the user's preferred language, theme, or layout choices. This lets you keep the user's preferences even after they leave the site and come back later.

Example: Storing User Preferences and Settings

// Set the user's theme preference
function setTheme(theme) {
  localStorage.setItem('theme', theme);
  applyTheme(theme);
}

// Apply the selected theme
function applyTheme(theme) {
  document.body.className = theme;
}

// Get the user's theme preference on page load
window.addEventListener('load', function() {
  const storedTheme = localStorage.getItem('theme');
  if (storedTheme) {
    applyTheme(storedTheme);
  }
});

The setTheme() function stores the user's selected theme in Local Storage. The applyTheme() function applies the theme to the page by setting the <body> element's class name. On page load, we check if a theme preference is stored and apply it if found.

Caching Data for Offline Access

Web Storage can cache data for offline access. If your web application needs to work offline or in low-connectivity situations, you can store data in Local Storage. This allows the application to function even when the user is not connected to the internet.

Example: Caching Data for Offline Access

// Cache the data in Local Storage
function cacheData(data) {
  localStorage.setItem('cachedData', JSON.stringify(data));
}

// Retrieve the cached data from Local Storage
function getCachedData() {
  const cachedData = localStorage.getItem('cachedData');
  return cachedData ? JSON.parse(cachedData) : null;
}

// Fetch data from the server
function fetchDataFromServer() {
  // Make an API request to fetch data
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      // Cache the fetched data
      cacheData(data);
      // Use the data in the application
      displayData(data);
    })
    .catch(error => {
      console.log('Error fetching data:', error);
      // Retrieve cached data as a fallback
      const cachedData = getCachedData();
      if (cachedData) {
        displayData(cachedData);
      } else {
        console.log('No cached data available.');
      }
    });
}

The cacheData() function stores the fetched data in Local Storage. The getCachedData() function retrieves the cached data from Local Storage. If the application fails to fetch data from the server (e.g., due to a network error), it falls back to the cached data if available.

Implementing Shopping Cart Functionality

Web Storage can implement shopping cart functionality in e-commerce applications. You can use Session Storage to store the user's selected products and quantities as they browse the website. This allows the shopping cart to stay intact even if the user navigates away from the page or closes the browser tab.

Example: Implementing Shopping Cart Functionality

// Add a product to the shopping cart
function addToCart(product) {
  let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
  cart.push(product);
  sessionStorage.setItem('cart', JSON.stringify(cart));
}

// Remove a product from the shopping cart
function removeFromCart(productId) {
  let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
  cart = cart.filter(product => product.id !== productId);
  sessionStorage.setItem('cart', JSON.stringify(cart));
}

// Get the current shopping cart contents
function getCartContents() {
  return JSON.parse(sessionStorage.getItem('cart')) || [];
}

The addToCart() function adds a product to the shopping cart stored in Session Storage. The removeFromCart() function removes a product from the cart based on its ID. The getCartContents() function retrieves the current contents of the shopping cart.

Saving Form Data Temporarily

Web Storage can save form data temporarily. If a user is filling out a long form and accidentally closes the browser or navigates away from the page, you can use Session Storage to save their progress. When they return to the form, you can restore the saved data, allowing them to continue from where they left off.

Example: Saving Form Data Temporarily

// Save form data to Session Storage
function saveFormData() {
  const form = document.querySelector('form');
  const formData = new FormData(form);
  sessionStorage.setItem('formData', JSON.stringify(Object.fromEntries(formData)));
}

// Load form data from Session Storage
function loadFormData() {
  const savedData = sessionStorage.getItem('formData');
  if (savedData) {
    const formData = JSON.parse(savedData);
    const form = document.querySelector('form');
    Object.keys(formData).forEach(key => {
      const field = form.elements[key];
      if (field) {
        field.value = formData[key];
      }
    });
  }
}

// Save form data on input change
document.querySelector('form').addEventListener('input', saveFormData);

// Load form data on page load
window.addEventListener('load', loadFormData);

The saveFormData() function saves the form data to Session Storage whenever an input field changes. The loadFormData() function loads the saved form data from Session Storage when the page loads, populating the form fields with the previously entered values.

These are a few examples of how Web Storage can be used in practical scenarios. Web Storage provides a simple way to store data on the client-side, enabling various features and improvements in web applications. It offers a solution to improve the user experience and functionality of your web applications.