DEV Community: Tawhidul Islam Khan

Stop Relying on Just LocalStorage: Others are powerful too

Tawhidul Islam Khan — Tue, 22 Apr 2025 04:41:21 +0000

When building modern web applications, efficient client-side data management is important. LocalStorage often comes to mind, but the browser offers powerful storage options, including localStorage, sessionStorage, cookies, and the often-underestimated IndexedDB. Let's delve into this storage zone.

localStorage:

This widely used client-side storage system allows you to store key-value pairs locally within the user's browser. However, it has a few notable limitations:

String-Only Storage: You can only store strings. To persist objects or arrays, you need to serialize them using JSON.stringify() when saving and parse them back with JSON.parse() when retrieving.
Limited Capacity: The storage limit is typically around 5MB per origin.
Synchronous Operations: localStorage operations are synchronous, meaning they can block the main browser thread, potentially impacting performance, especially when dealing with larger datasets.

sessionStorage:

Similar to localStorage, sessionStorage provides key-value storage. The main difference is its lifespan: data stored in sessionStorage persists until the browser tab or window is closed. It shares the same limitations as localStorage:

5MB Storage Limit
String-Only Storage
Synchronous Operations

Cookies:

These small text files play a vital role in web communication. They can be sent with HTTP requests, making them essential for tasks like transmitting authentication tokens to the backend, particularly in Server-Side Rendering (SSR) scenarios. However, they have a significantly smaller storage capacity:

4KB Storage Limit

IndexedDB:

The NoSQL Powerhouse: IndexedDB is used for more complex data management. It is like a NoSQL database. It offers significant advantages:

Flexible Data Storage: Unlike localStorage and sessionStorage, IndexedDB can store structured data, including JavaScript objects and binary data.
Storage Capacity: You have access to much more storage space, often up to 100MB.
Asynchronous Operations: IndexedDB operations are asynchronous, preventing blocking of the main thread and ensuring a smoother user experience, especially when dealing with large amounts of data.
Advanced Features: It supports key features like database indexing, transactions for data integrity, and powerful querying capabilities.

Key Takeaway:

While localStorage and sessionStorage serve well for simple key-value storage, IndexedDB is the solution for complex client-side data management in modern web applications, offering greater flexibility, capacity, and performance.

CSS Specificity

Tawhidul Islam Khan — Mon, 30 Oct 2023 05:47:32 +0000

CSS specificity determines which CSS rule is applied when multiple rules target the same elements. For example, there is a div that has the content "Hello World", we will set a background color to that div. We can set background color in many ways.

Inline style
Id selector
class selector, attribute sector, pseudo selector
Element selector

Each way has its specificity hierarchy,

Inline Style: The inline style has the highest specificity and overrides all other styles. For example
<div style="background-color: red">Hello World</div>

Id selector: The id selector has less specificity than the inline style and higher specificity than the class selector and element selector
<div id="box1">Hello World</div>
// in CSS file or style in head
#box1{ background-color: red; }
Class Selector: class selector, attribute selector has medium specificity: for example:
<div class="box">Hello World</div> // in CSS file or style in head .box{ background-color: red; }
Element Selector: Element selector has low specificity, for example:
<div>Hello World</div> // in CSS file or style in head div{ background-color: red; }

There is an exception: If we use !important, it will override all CSS

How to prevent dark mode effect on HTML form elements

Tawhidul Islam Khan — Thu, 27 Jul 2023 04:01:08 +0000

I was working on a project, suddenly I faced an issue. There should be normal mode to html form elements for example input, select, and textarea fields when desktop dark mode is on. Dark mode affects the form element's background color, Then I started to look for a solution and found the answer. There is css property called color-scheme which indicates what color scheme can be used.

add color-scheme property as below

input, select, textarea{ color-scheme: light; }

If I use light then it will use light mode only

input, select, textarea{ color-scheme: light dark; }

If I use light dark then it will use dark mode and light mode both.

I used only light so that my form elements can remain as normal design, not dark color background.