Browser Storage

Browser Storage with JavaScript

Browser storage allows web applications to store data locally within the user's browser. There are several methods for browser storage, each with its own use cases and limitations.

Types of Browser Storage

  1. Cookies: Small pieces of data stored and sent with every request to the server.
  2. LocalStorage: Stores data with no expiration time.
  3. SessionStorage: Stores data for the duration of the page session.
  4. IndexedDB: A low-level API for client-side storage of significant amounts of structured data.

Cookies

What Are Browser Cookies?

Imagine a browser cookie as a tiny digital note that the web browser keeps in its pocket. This note can be written by either the website you’re visiting (using JavaScript) or the server it’s hosted on during your visit. Whenever you return to that website, your browser pulls out this note and hands it back to the server or the website's JavaScript, reminding it of who you are and what you did last time.

Cookies are like the ultimate personal assistants for the web. They handle tasks such as keeping you logged in (session management), remembering your favorite settings (personalization), and even tracking your online behavior across different sites (analytics and advertising).

The Evolution of Cookies

Back in the day, cookies were the go-to for all kinds of storage on the client-side. But there was a catch. Every single cookie for a domain was sent along with each request to the server on that domain. It was like carrying a stack of postcards for every trip you made to the mailbox. This not only slowed things down, especially on slow connections, but also meant there were strict limits on how much you could store (around 4KB per cookie and up to 20 cookies per domain).

Modern Web Storage APIs

Enter the Web Storage APIs, the superheroes of modern web development! With localStorage and sessionStorage, browsers now have a sleek, efficient way to stash key-value pairs of data right on the client-side. These tools are far more intuitive and spacious than cookies, offering up to 5MB of storage without the performance hit of sending data back and forth with every server request.

So, next time you adjust your settings on a website or stay logged in, remember that behind the scenes, a trusty cookie or a clever Web Storage API is making sure your preferences stick around, all while keeping your browsing smooth and efficient.

Advantages

  • Session Management: Ideal for managing user sessions (e.g., login sessions).
  • Lightweight: Small and simple to use.
  • Expiration Control: You can set expiration dates for cookies.

Disadvantages

  • Size Limitations: Limited to around 4KB of data.
  • Security Risks: Can be intercepted or manipulated if not secured properly.
  • Sent with Every Request: Adds overhead to HTTP requests.

Setting, Getting, and Deleting Cookies

// Setting a cookie
document.cookie = "username=Hunter Macias; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Getting a cookie
const getCookie = (name) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
};
console.log(getCookie('username')); // "John Doe"

// Deleting a cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Practical Examples

User Preferences

Store user preferences such as theme or language settings.

cookies-ex1.js 
// Setting a cookie for theme preference
document.cookie = "theme=dark; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Retrieving the theme preference
const theme = getCookie('theme');
console.log(theme); // "dark"

Shopping Cart

Store a user's shopping cart items.

cookies-ex2.js 
// Adding an item to the cart
document.cookie = "cart=product123; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Getting the cart item
const cartItem = getCookie('cart');
console.log(cartItem); // "product123"

Simple Authentication

Manage simple authentication with cookies.

simple-auth.js 
// Setting a cookie for user authentication
document.cookie = "authToken=abc123; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Checking if the user is authenticated
const authToken = getCookie('authToken');
if (authToken) {
  console.log('User is authenticated');
} else {
  console.log('User is not authenticated');
}

User Visits Count

Track the number of times a user visits the site.

cookie-site-count.js 
// Getting the visit count
let visits = getCookie('visits');
visits = visits ? parseInt(visits) + 1 : 1;

// Setting the updated visit count
document.cookie = `visits=${visits}; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/`;

console.log(`This is your visit number ${visits}`);

Game State

Save the state of a simple game.

gamestate.js 
// Setting the game state
document.cookie = "gameLevel=2; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Getting the game state
const gameLevel = getCookie('gameLevel');
console.log(`Current game level: ${gameLevel}`); // "2"

COMMON USES:

  • Session ManagementKeep users logged in across page refreshes and sessions.
  • PersonalizationStore user preferences like language and theme.
  • AnalyticsTrack user behavior and visits for analytics purposes.
  • Shopping CartsMaintain the state of a user's shopping cart.

SECURITY CONSIDERATIONS

  • HttpOnlyPrevents access to cookies via JavaScript.
  • SecureEnsures cookies are only sent over HTTPS.
  • SameSiteHelps mitigate cross-site request forgery (CSRF) attacks.

LocalStorage

LocalStorage allows you to store key-value pairs in a web browser with no expiration date.

localstorage.js 
// Setting an item
localStorage.setItem('username', 'John Doe');

// Getting an item
const username = localStorage.getItem('username');
console.log(username); // "John Doe"

// Removing an item
localStorage.removeItem('username');

// Clearing all items
localStorage.clear();

SessionStorage

SessionStorage is similar to LocalStorage but the data is stored only for the duration of the page session.

localstorage.js 
// Setting an item
sessionStorage.setItem('username', 'John Doe');

// Getting an item
const username = sessionStorage.getItem('username');
console.log(username); // "John Doe"

// Removing an item
sessionStorage.removeItem('username');

// Clearing all items
sessionStorage.clear();

IndexedDB

IndexedDB is a low-level API for client-side storage of large amounts of structured data, including files and blobs.

indexdb.js 
// Opening a database
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
};

request.onsuccess = (event) => {
  const db = event.target.result;

  // Adding data
  const transaction = db.transaction(['users'], 'readwrite');
  const objectStore = transaction.objectStore('users');
  objectStore.add({ id: 1, name: 'John Doe' });

  // Retrieving data
  objectStore.get(1).onsuccess = (event) => {
    console.log(event.target.result.name); // "John Doe"
  };
};

request.onerror = (event) => {
  console.error('Database error:', event.target.errorCode);
};

NOTES:

  • CookiesSuitable for session management but limited in size and efficiency.
  • LocalStoragePersistent storage with no expiration, limited to 5MB.
  • SessionStorage Similar to LocalStorage but data is cleared when the page session ends.
  • IndexedDBBest for storing large amounts of structured data.

FAQ

Q: What is the main difference between LocalStorage and SessionStorage?

A: The main difference is that LocalStorage stores data with no expiration time, while SessionStorage stores data for the duration of the page session (data is cleared when the page session ends).

Q: Can I store complex objects in LocalStorage?

A: LocalStorage can only store strings. To store complex objects, you need to convert them to a JSON string using JSON.stringify() and parse them back to objects using JSON.parse().

Q: What are the security considerations for using cookies?

A: Cookies can be intercepted and manipulated if not secured properly. Always use the Secure and HttpOnly flags to protect cookies.

Q: How much data can I store in IndexedDB?

A: IndexedDB allows you to store significantly more data compared to other storage options. The limit is typically determined by the browser and available disk space.

Ajax And Fetch
Dom Manipulation