🦥 Browser Storage For Dummies

Sponsored by

Hello friends!

Welcome to this week’s Sloth Bytes

I hope you had a great week.

10x Your Outbound With Our AI BDR

Imagine your calendar filling with qualified sales meetings, on autopilot. That's Ava's job. She's an AI BDR who automates your entire outbound demand generation.

Ava operates within the Artisan platform, which consolidates every tool you need for outbound:

• 300M+ High-Quality B2B Prospects

• Automated Lead Enrichment With 10+ Data Sources Included

• Full Email Deliverability Management

• Personalization Waterfall using LinkedIn, Twitter, Web Scraping & More

Book a demo and supercharge your sales team

A single sloth can host up to 950 moths and beetles within its fur. 

Browser Storages

Ever wondered why there are so many ways to store data in the browser?

Let me break down when to use each one (and when not to).

Types of Browser Storage

• Web Storage (Local & Session)

• Cookies

• IndexedDB

Web Storage: The Simple One

Local Storage

Local Storage stays saved even when you close and reopen your browser.

✅ Perfect for:

• User setting preferences

• Theme settings

• Shopping cart items

• Language choice

❌ Avoid for:

• Sensitive data

• Large objects

• Frequently changing data

// ✅ Good Storage Usage
localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'en');
sessionStorage.setItem('formStep', '2');

// ❌ Bad Storage Usage
localStorage.setItem('creditCard', '4111-1111-1111-1111');
localStorage.setItem('bigData', JSON.stringify(hugeObject));

Session Storage

Similar to local storage except it DOES NOT save when you close and reopen your browser.

 ✅ Perfect for:

• Form wizard data

• Multi-step processes

• Temporary user state

❌ Avoid for:

• Data needed after tab close

• Cross-tab communication

• Long-term storage

// ✅ Good SessionStorage Usage
sessionStorage.setItem('formStep', '2');
sessionStorage.setItem('tempData', JSON.stringify(formData));

// ❌ Bad SessionStorage Usage
sessionStorage.setItem('userPreferences', preferences);

Cookies: The Classic One

A Cookie is a small piece of data a server sends to a user's web browser.

Cookies will also stay saved even when you close and reopen your browser.

 ✅ Perfect for:

• Authentication

• Server-side needed data

• Cross-subdomain data

• User Tracking (yeah…)

• Small bits of data (4KB limit)

❌ Avoid for (kinda):

• Large amounts of data (that’s why we have databases)

• Client-only data (local storage could do that for us, but this depends on the situation)

• Frequent updates (You’ll be transferring additional data to the server every time you make a request. More so if you are storing a lot of data into the cookies.)

Disclaimer: Cookies are honestly good for a lot of things, but it all depends on the situation.

document.cookie = 'sessionId=abc123; Secure; SameSite=Strict';
document.cookie = 'theme=dark; max-age=31536000';

Cookies Vs Local Storage

Cookies and local storage serve different purposes.

Cookies are primarily for reading server-side, while local storage can only be read by the client-side.

IndexedDB: The Powerful One

A SQL-based DB system that’s meant for storing larger amounts of structured data.

 ✅ Perfect for:

• Large datasets

• Offline apps

• File/blob storage

• Complex data structures

❌ Avoid for:

• Simple key-value pairs

• Small amounts of data

• Anything that local storage/cookies could handle

let db; 
// Opening or creating our database with a name and an ID 
// We call this request because we're "requesting" this database
const request = window.indexedDB.open("coolDatabase", 1) 

request.onerror = (event) => { 
  // Do something with request.error 
  console.error("Why didn't you allow my web app to use IndexedDB?"); }; 

request.onsuccess = (event) => { 
  // Do something with request.result 
  db = event.target.result 
};

Quick Storage Size Limits

• LocalStorage: ~5-10MB

• SessionStorage: ~5-10MB

• Cookies: ~4KB

• IndexedDB: Several GB

• Need server access? → Cookies

• Temporary data? → SessionStorage

• Simple client data? → LocalStorage

• Complex/large data? → IndexedDB

Remember

• Always validate stored data

• Clear sensitive data

• Handle storage errors

• Check available space

• Consider privacy modes

Use the right tool for the job - your users will thank you!

Maybe I’ll do individual newsletters for each soon, so stay tuned for that😁 

Drowning In Support Tickets? Maven AGI is here to help.

Maven AGI platform simplifies customer service by unifying systems, improving with every interaction, and automating up to 93% of responses. Seamlessly integrated with 50+ tools like Salesforce, Freshdesk, and Zendesk, Maven can deploy AI agents across multiple channels—text, email, web, voice, and apps—within days. Companies like Tripadvisor, ClickUp, and Rho slash response times by 60%, ensuring quicker support and exceptional customer satisfaction. Don’t let support tickets slow you down

Request a free personalized demo today.

*A message from our sponsor.

We’re so back.

Alright first challenge of the year… let’s start off easy.

Censor Words Longer Than Four Characters

Create a function that takes a string and censors words over four characters with *.

Examples

censor("The code is fourty")
output = "The code is ******"

censor("Two plus three is five")
output = "Two plus ***** is five"

censor("aaaa aaaaa 1234 12345")
output = "aaaa ***** 1234 *****"

Notes

• Don't censor words with exactly four characters.

• If all words have four characters or less, return the original string.

• The amount of * is the same as the length of the word.

How To Submit Answers

Reply with

• A link to your solution (github, twitter, personal blog, portfolio, replit, etc)

• or if you’re on the web version leave a comment!

New video coming out soon!

I’m working on a video explaining how to use Docker, so stay tuned for that!

That’s all from me!

Have a great week, be safe, make good choices, and have fun coding.

If I made a mistake or you have any questions, feel free to comment below or reply to the email!

See you all next week.