Table of contents

1. 🏪 1. localStorage: the pet shop remembers you
2. 💡 When to use:
3. 🐶 2. sessionStorage: only lasts as long as the doggo is in the tab
4. 🐾 Practical example:
5. 🐕 3. IndexedDB: your (offline) database in the browser
6. 🐾 Real example: product caching for offline browsing
7. 🍪 And the cookies?
8. 🔐 About security (seriously now)
9. 🧠 Which one to use in your pet e-commerce?
10. 🎁 Bonus tip: use libraries that help
11. ✨ Conclusion

If you’ve ever worked in e-commerce — you know that the user experience needs to be smooth, fast and efficient. No one wants to waste time redoing filters, adding everything to the cart or registering with each new visit.

But what if I told you that you could improve this with something that every modern browser already offers? Yes, I’m talking about local storages.

In this article, we will see how to use localStorage, sessionStorage e IndexedDB in practice, with examples from an online pet shop. Let’s go?

---

🏪 1. localStorage: the pet shop remembers you

Imagine that the customer enters your e-commerce, chooses “food for neutered cats”, changes the theme to dark, and selects shipping to São Paulo. It would be quite annoying if, upon returning later, all this was forgotten, right?

That’s where localStorage comes in: a browser drawer where you can store small pieces of information between sessions.

// Dark theme saved in browser
localStorage.setItem("theme", "dark");

// Default city
localStorage.setItem("userLocation", "São Paulo");

// Search filters
localStorage.setItem("lastSearch", JSON.stringify({ pet: "cat", category: "pet food" }));

Now when the customer comes back, you can load this automatically. 💫

💡 When to use:

• Light theme/escuro
• Last applied filters
• Recently viewed product
• Cart (if not using cookies or backend)

---

🐶 2. sessionStorage: only lasts as long as the doggo is in the tab

Let’s say the user is completing a purchase and fills in address details. But then he decides to take a quick look at Instagram (who never?) and accidentally closes the tab.

If you want it to not have the data saved when reopening (for security or consistency), use sessionStorage. He lives only as long as the flap is open.

🐾 Practical example:

// Store checkout progress
sessionStorage.setItem("checkoutStep", "2");

// Temporary form data
sessionStorage.setItem("shippingInfo", JSON.stringify({
  street: "Poodles Street", 
  number: 42
}));

Ideal for sensitive flows, like checkout or login, where keeping data after closing the tab may be risky or unnecessary.

---

🐕 3. IndexedDB: your (offline) database in the browser

If you want to offer an offline experience, cache products, or store a large list (e.g. purchase history), IndexedDB is the way to go.

It’s a real database, built into the browser. Asynchronous, powerful, and ideal for when localStorage doesn’t cut it.

🐾 Real example: product caching for offline browsing

const request = indexedDB.open("petStoreDB", 1);

request.onupgradeneeded = function (event) {
  const db = event.target.result;
  db.createObjectStore("products", { keyPath: "id" });
};

request.onsuccess = function (event) {
  const db = event.target.result;
  const tx = db.transaction("products", "readwrite");
  const store = tx.objectStore("products");

  // Caching homepage products
  store.put({ 
    id: 1, 
    name: "Premium Cat Food", 
    price: 89.90 
  });
};

You can, for example, save the last browsed products, display when the user is offline and even offer a local search.

---

🍪 And the cookies?

Cookies are still useful, especially when you need data to travel to the server — like a JWT token for authentication.

But be careful: the limit is ~4KB per cookie and they are sent with each request. Prefer cookies only for the essentials.

---

🔐 About security (seriously now)

Never, never store:

• Passwords
• Access Tokens
• Sensitive personal data

These storages can be accessed via JavaScript and are therefore vulnerable to XSS attacks. If you need to store something sensitive, use secure cookies with HttpOnly and Secure, and always sanitize on the frontend/backend.

---

🧠 Which one to use in your pet e-commerce?

What to keep	Where to store
Theme, filters, city, preferences	localStorage
Checkout progress	sessionStorage
Browsing history, cache	IndexedDB
Session token (securely)	cookie (HttpOnly)

---

🎁 Bonus tip: use libraries that help

Managing all of this by hand can turn into chaos. There are libs that make the experience smoother:

• localForage – IndexedDB + localStorage, with simple API
• Dexie.js – IndexedDB with a relational database look
• idb – lightweight wrapper, with promises

---

✨ Conclusion

Whether it’s an e-commerce or an e-learning platform, knowing how to use the right storage makes a real difference in the user experience. You improve performance, customization and even reduce hits on the backend.

And the best part: all of this is within your browser’s reach, without installing anything.

So, the next time a customer visits your store and finds everything just the way they left it, remember: they may not even know it, but localStorage did the dirty work 🧼