DEV Community: balaji s

Understanding LocalStorage vs sessionStorage in Web Development

balaji s — Sat, 26 Sep 2026 07:59:37 +0000

A Complete Guide to Saving and retriving Data in the Browser using Web Storage API

When building websites, web developers often need a way to store data right inside the user's browser. Before modern HTML5, this meant relying heavily on cookies. Today, we have two much better, cleaner options: LocalStorage and sessionStorage.

Both belong to the Web Storage API and let you save key-value pairs. But how do you know when to use which? Let's dive in from the basics to advanced concepts with clear, simple examples!

The Basics (What Are They?)

Think of both localStorage and sessionStorage as mini-databases inside your web browser. They both use the exact same methods to save, read, and delete data.

LocalStorage: Data stored here never expires. Even if you close the browser tab, restart your computer, or come back a week later, the data will still be there until you manually delete it via code or clear your browser history.
sessionStorage: Data stored here lasts only as long as the browser tab is open. The moment you close that specific tab or window, the data is wiped out instantly.

How to Use Them

The syntax for both is identical. Just swap out localStorage for sessionStorage depending on your needs.

1. Saving Data (`setItem`)

To save data, use .setItem('key', 'value').

// Save user settings in LocalStorage (stays forever)
localStorage.setItem('theme', 'dark');

// Save a temporary form step in sessionStorage (disappears when tab closes)
sessionStorage.setItem('currentStep', '2');

2. Reading Data (`getItem`)

To retrieve what you saved, use .getItem('key').

// Get the saved theme
const userTheme = localStorage.getItem('theme');
console.log(userTheme); // Output: "dark"

3. Removing Data (`removeItem`)

To delete a specific piece of data:

localStorage.removeItem('theme');

4. Clearing Everything (`clear`)

To wipe out all data stored for your website:

// Clears everything in sessionStorage for this site
sessionStorage.clear();

Advanced Concepts

Now that you know the basics, let's look at how professionals handle real-world data structures, security, and storage limits.

1. Storing Objects and Arrays (JSON)

Web storage can only save strings. If you try to save a JavaScript object or array directly, it will save as the text "[object Object]", which is useless.

To fix this, use JSON.stringify() when saving and JSON.parse() when reading.

// The Object we want to save
const user = {
  name: 'Aarav',
  age: 25,
  isLoggedIn: true
};

// 1.Save as a JSON string
localStorage.setItem('userData', JSON.stringify(user));

// 2.Retrieve and convert back to an Object
const savedUser = JSON.parse(localStorage.getItem('userData'));

console.log(savedUser.name); // Output: Aarav

2. Listening for Changes (`storage` event)

LocalStorage has a cool superpower: it can trigger events across different tabs of the same website! If a user has your site open in two tabs and changes their theme in Tab A, Tab B can automatically detect it and update.

Note: This only works for localStorage, not sessionStorage.

// Run this code in your script to listen for storage changes from other tabs
window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    console.log(`Theme changed to: ${event.newValue}`);
    // Apply new theme instantly without refreshing the page!
  }
});

3. Storage Limits & Security (What to watch out for)

Storage Capacity: Both typically allow around 5MB to 10MB of data per domain. That's plenty for text, settings, and small JSON objects, but don't try to store large files or images!
Security Warning: Never store sensitive data like passwords, credit card numbers, or personal identification tokens in LocalStorage or sessionStorage. Anything stored there can be accessed by any malicious JavaScript script running on your page (via Cross-Site Scripting or XSS attacks).

Summary

Feature	LocalStorage	sessionStorage
Lifespan	Forever (until cleared manually)	Until the tab/window is closed
Scope	Shared across all tabs/windows of the same site	Isolated to that specific tab only
Capacity	~5MB - 10MB	~5MB - 10MB
Best Used For	Dark mode preferences, user settings, offline cached data	Shopping cart temporary steps, multi-step form data

Conclusion

Choosing between localStorage and sessionStorage is simple: Ask yourself, "Does this data need to survive if the user closes the tab?"

If yes, use localStorage.
If no (it's temporary), use sessionStorage.

let me share your doubts about in this blog to put commands below

Master VS Code Emmet Shortcuts

balaji s — Sat, 26 Sep 2026 06:47:52 +0000

Write HTML and CSS 10x Faster

If you spend hours manually typing out opening tags, closing tags, and CSS properties, there is a much better way. Built right into Visual Studio Code is a powerful tool called Emmet.

Emmet allows you to write shorthand abbreviations and expand them into complete, complex HTML and CSS code instantly with a single keystroke. Whether you are a beginner looking to speed up your workflow or an experienced developer wanting to cut down on repetitive typing, mastering Emmet is a game-changer.

What is Emmet?

Emmet is a toolkit for web developers that turns simple CSS-like selectors into fully-fledged markup. Best of all, Emmet is built directly into VS Code by default—no extensions or plugins required!

When you type an abbreviation and press Tab (or Enter, depending on your settings), VS Code instantly translates your shortcut into clean, formatted code.

Essential HTML Emmet Shortcuts (With Examples)

Here are the most practical Emmet shortcuts you will use every day when building web pages.

1. The Ultimate Starter: The HTML5 Boilerplate

Instead of copying and pasting a standard HTML skeleton every time you start a new file, just type an exclamation point and hit Tab.

Shortcut: !
Result:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

2. Elements with IDs and Classes

You can create tags instantly by combining the tag name with # for IDs and . for classes.

Shortcut: div#main
Result:

<div id="main"></div>

Shortcut: section.container
Result:

<section class="container"></section>

(Pro Tip: If you just type .card, Emmet defaults to a div, giving you <div class="card"></div>!)

3. Nesting Elements (The `>` Operator)

Want to put elements inside other elements? Use the greater-than sign (>).

Shortcut: ul>li>a
Result:

<ul>
    <li><a href=""></a></li>
</ul>

4. Multiplication (The `*` Operator)

Need multiple elements, like a list of items? Multiply them easily.

Shortcut: ul>li*3
Result:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

5. Adding Text Content Inside Tags (Using `{}`)

You can inject text directly into your tags using curly braces.

Shortcut: button{Click Me}
Result:

<button>Click Me</button>

Combined Example:

Shortcut: ul>li.item*3{List Item}
Result:

<ul>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
</ul>

6. Numbering Items with the Dollar Sign (`$`)

When creating multiple elements, you can automatically number them using $.

Shortcut: ul>li.item-$*3{Item $}
Result:

<ul>
    <li class="item-1">Item 1</li>
    <li class="item-2">Item 2</li>
    <li class="item-3">Item 3</li>
</ul>

Essential CSS Emmet Shortcuts

Emmet isn't just for HTML—it works wonders in CSS files too by using shorthand abbreviations that expand into full property-value pairs.

Shortcut	Expands To	Example / Description
`m10`	`margin: 10px;`	Quick spacing
`p20`	`padding: 20px;`	Quick padding
`df`	`display: flex;`	Flexbox setup
`aic`	`align-items: center;`	Align flex items vertically
`jcc`	`justify-content: center;`	Justify flex items horizontally
`w100`	`width: 100px;`	Set width (or `w100%` for percentages)
`bgc`	`background-color: #000;`	Quick background color
`fz16`	`font-size: 16px;`	Font sizing

Official Emmet Documentation

you can follow the link to learn more emmet shortcuts

docs.emmet.io

Summary: Your Cheat Sheet to Remember

Goal	Shortcut Example
Boilerplate	`!`
Class / ID	`div.wrapper`, `span#header`
Child element	`header>nav>ul`
Multiple tags	`div*4`
Text inside	`h1{Hello World}`
Numbering	`p.text-$*2`

Conclusion

Emmet takes a little bit of muscle memory to get used to, but once it clicks, it will save you thousands of keystrokes every single week. Start by incorporating just one or two shortcuts into your workflow today—like the ! boilerplate or .class shortcuts—and work your way up to complex nested structures.

What is your favorite Emmet shortcut to use in VS Code? Let us know in the comments below!

Comparision Operator in Javascript

balaji s — Thu, 27 Aug 2026 07:05:41 +0000

Comparison operators compare the values of two operands and evaluate whether the
statement they form is true or false. The following example uses the
strict equality operator (===) to compare two operands: the expression
2 + 2 and the value 4. Because the result of the expression and the number
value 4 are the same, this expression evaluates to true:

2 + 2 === 4
> true

Type coercion and equality

Two of the most frequently-used comparison operators are == for loose equality
and === for strict equality. == performs a loose comparison between two
values by coercing the operands to matching data types, if possible. For
example, 2 == "2" returns true, even though the comparison is being made
between a number value and a string value.

2 == 2
> true

2 == "2"
> true

The same is true of !=, which returns true only if the operands being
compared aren't loosely equal.

2 != 3
> true

2 != "2"
> false

Strict comparisons using === or !== don't perform type coercion. For a
strict comparison to evaluate to true, the values being compared must have the
same data type. Because of this, 2 == "2" returns true, but 2 === "2"
returns false:

2 === 3
> false

2 === "2"
> false

To remove any ambiguity that might result from auto-coercion, use === whenever
possible.

Operator	Description	Usage	Result
===	Strictly equal	2 === 2	true
!==	Not strictly-equal	2 !== "2"	true
==	Equal (or "loosely equal")	2 == "2"	true
!=	Not equal	2 != "3"	true
>	Greater than	3 > 2	true
>=	Greater than or equal to	2 >= 2	true
<	Less than	2 < 3	true
<=	Less than or equal to	2 <= 3	true

Truthy and falsy

All values in JavaScript are implicitly true or false, and can be coerced to
the corresponding boolean value---for example, by using the "loosely equal"
comparator. A limited set of values coerce to false:

0
null
undefined
NaN
An empty string ("")

All other values coerce to true, including any string containing one or more
characters and all nonzero numbers. These are commonly called "truthy" and
"falsy" values.

"My string" == true
> true

100 == true
> true

0 == true
> false

Logical operators

Use the logical AND (&&), OR (||), and NOT (!) operators to control the flow of a script based on the evaluation of two or more conditional statements:

2 === 3 || 5 === 5;
> true

2 === 2 && 2 === "2"
> false

2 === 2 && !"My string."
> false

A logical NOT (!) expression negates the truthy or falsy value of an operand, evaluating to true if the operand evaluates to false, and false if the operand evaluates to true:

true
> true

!true
> false

!false
> true

Using the logical NOT operator (!) in front of another data type, like a
number or a string, coerces that value to a boolean and reverses the truthy or
falsy value of the result.

"string"
> "string"

!"string"
> false

0
> 0

!0
> true

It's common practice to use two NOT operators to quickly coerce data to its
matching boolean value:

!!"string"
> true

!!0
> false

The logical AND and OR operators don't perform any coercion by themselves. They
return the value of one of the two operands being evaluated, with the chosen
operand determined by that evaluation.

Logical AND (&&) returns the first of its two operands only if that operand
evaluates to false, and the second operand otherwise. In comparisons that
evaluate to boolean values, it returns true only if the operands on both sides
of the logical AND evaluate to true. If either side evaluates to false, it
returns false.

true && false
> false

false && true
> false

false && false
> false

true && true
> true

When && is used with two non-boolean operands, the first operand is returned
unchanged if it can be coerced to false. If the first operand can be coerced
to true, the second operand is returned unchanged:

false && "My string"
> false

null && "My string"
> null

"My string" && false
> false

"My string" && "My second string"
> "My second string"

2 === 2 && "My string"
> "My string"

Logical OR (||) returns the first of its two operands only if that operand
evaluates to true, and the second operand otherwise. In comparisons that
evaluate to boolean values, this means it returns true if either operand
evaluates to true, and if neither side evaluates to true, it returns
false:

true || false
> true

false || true
> true

true || true
> true

false || false
> false

When using || with two non-boolean operands, it returns the first operand
unchanged if it could be coerced to true. If the first operand can be coerced
to false, the second operand is returned unchanged:

false || "My string"
> "My string"

null || "My string"
> "My string"

"My string" || false
> "My string"

"My string" || "My second string"
> "My string"

2 === 2 || "My string"
> true

Nullish coalescing operator

Introduced in ES2020,
the "nullish coalescing operator" (??) returns the first operand only if that
operand has any value other than null or undefined. Otherwise, it returns
the second operand.

null ?? "My string"
> "My string"

undefined ?? "My string"
> "My string"

true ?? "My string";
> true

?? is similar to a logical OR, but stricter in how the first operand is
evaluated. || returns the second operand for any expression that can be
coerced to false, including undefined and null. ?? returns the second
operand only when the first operand is strictly equal to null or undefined,
even if it could be coerced to false:

0 ?? "My string";
> 0

false ?? "My string";
> false

undefined ?? "My string";
> "My string"

Logical assignment operators

Use assignment operators to assign the value of a second operator to a first
operator. The most common example of this is a single equals sign (=), used to
assign a value to a declared variable.

Use logical assignment operators to conditionally assign a value to a variable
based on the truthy or falsy value of that variable.

The logical AND assignment (&&=) operator evaluates the second operand and
assigns to the first operand if the only if the first operand would evaluate to
true---effectively, "if the first operand is true, assign it the value of
the second operand instead:"

let myVariable = false;
myVariable &&= 2 + 2;
> false

myVariable = true;
myVariable &&= 2 + 2;
> 4

The truthy or falsy value of the first operand determines whether an assignment
is performed. However, trying to evaluate the first operand using a comparison
operator results in a true or false boolean, which can't be assigned a
value:

let myVariable = 5;
myVariable > 2 &&= "My string"
> SyntaxError: Invalid left-hand side in assignment

The logical OR assignment (||=) operator evaluates the second operand and
assign to the first operand if the first operand evaluates to false---
effectively "if the first operand is false, assign it the value of the second
operand instead:"

let myVariable = false;
myVariable ||= 2 + 2;
> 4

myVariable = true;
myVariable ||= 2 + 2;
> true

Solved the Windows Shrink Volume Problem Using AOMEI Partition Assistant to Install Linux Mint

balaji s — Sun, 12 Jul 2026 17:37:25 +0000

Recently, I wanted to install Linux Mint Cinnamon alongside Windows 11 on my Samsung Galaxy Book2 Pro 360. Since my laptop had only a single C: drive, I needed to shrink the Windows partition and create 100 GB of unallocated space for Linux.

At first, I thought Windows Disk Management would be enough. However, I encountered one of the most common Windows partitioning errors:

You cannot shrink a volume beyond the point where any unmovable files are located.
Although my C: drive had 147 GB of free space, Windows only allowed me to shrink 653 MB.

Problem Begins

When I opened Disk Management Right Click C: → Shrink Volume Windows calculated the available shrink space as only 653 MB instead of the expected 100 GB.

Why Does This Happen?

Windows stores several system files near the end of the partition.

Page File (pagefile.sys)
Hibernation File (hiberfil.sys)
Master File Table (MFT)
System Restore data
NTFS Metadata

Windows Disk Management cannot move these files.

Even if available of free space exists, the partition cannot be shrunk beyond the last unmovable file.

What I Tried Before Using AOMEI

Before installing any third-party software, I tried every recommended Windows method.

1. Disabled Hibernation

Opened Command Prompt as Administrator.
powercfg -h off
This removed the hibernation file.

2. Disabled Page File

Open run window sysdm.cpl Navigated to

Advanced
→ Performance
→ Settings
→ Advanced
→ Virtual Memory

It disabled paging temporarily then Restarted Windows.

3. Disabled System Protection

Opened System Protection then Turned off Restore Points temporarily.
again Restarted Windows.

4. Defragmented Free Space

Run defrag C: /X The result showed:
Largest Free Space = 65.92 GB
Although free space became more contiguous, Windows still could not shrink the partition to the required size.

5. Tried Safe Mode

Enabled Safe Mode using msconfigthen Restarted Windows.
Unfortunately,
Disk Management still could not shrink the partition because the Master File Table (MFT) remained unmovable.

Why I Chose AOMEI Partition Assistant

At this point, it became clear that Windows Disk Management had reached its limitations.

I researched several partition management tools and selected AOMEI Partition Assistant Standard for the following reasons:

Free for personal use
User-friendly interface
Supports resizing the Windows system partition
Can move unmovable system files
Uses Windows PE mode for safe partition operations
Excellent success rate reported by users
Supports GPT/UEFI systems

Unlike Windows Disk Management, AOMEI performs partition operations before Windows fully loads, allowing it to relocate files that Windows normally locks.

AOMEI Partition Assistant Tool

Step 1

Download and install
AOMEI Partition Assistant Standard from following link: https://www.aomeitech.com/llyy/download/aomei-partition-software.html

Step 2

Select shrinking disk from partition list

Select Resize/Move Partition from properties

Step 3

Drag the partition slider.
I reduced the partition size from 457 GB to 357 GB
This creates 100 GB Unallocated Space
Finally I review the pending operation then layout should show
C: 357 GB
Unallocated: 100 GB
Nothing is changed yet because my linux installation take to choose format options.

Step 4

AOMEI detects that the Windows system partition is being modified.

It displays Restart into Windows PE Mode
so Select that one then Click -> OK

Step 5

The computer restarts. Instead of loading Windows immediately, AOMEI boots into its own Windows PE environment. It safely moves the unmovable system files. This process took around 10–20 minutes on my SSD.
After restart windows I am opening Disk Management it showed 100GB unallocated exactly as my planned.

Installing Linux Mint

Instead of formatting the new space as NTFS, I left it as Unallocated.
Then I booted using the Linux Mint USB installer.
During installation, I selected Something Else option
Created an Ext4 partition using the 100 GB unallocated space.

Reused the existing EFI System Partition without formatting it.

Finally my installation completed successfully.
Now my laptop have dual boots:

Windows 11
Linux Mint Cinnamon

DEV Community: balaji s

Understanding LocalStorage vs sessionStorage in Web Development

A Complete Guide to Saving and retriving Data in the Browser using Web Storage API

The Basics (What Are They?)

How to Use Them

1. Saving Data (setItem)

2. Reading Data (getItem)

3. Removing Data (removeItem)

4. Clearing Everything (clear)

Advanced Concepts

1. Storing Objects and Arrays (JSON)

2. Listening for Changes (storage event)

3. Storage Limits & Security (What to watch out for)

Summary

Conclusion

Master VS Code Emmet Shortcuts

Write HTML and CSS 10x Faster

What is Emmet?

Essential HTML Emmet Shortcuts (With Examples)

1. The Ultimate Starter: The HTML5 Boilerplate

2. Elements with IDs and Classes

3. Nesting Elements (The > Operator)

4. Multiplication (The * Operator)

5. Adding Text Content Inside Tags (Using {})

6. Numbering Items with the Dollar Sign ($)

Essential CSS Emmet Shortcuts

Official Emmet Documentation

Summary: Your Cheat Sheet to Remember

Conclusion

Comparision Operator in Javascript

Type coercion and equality

Truthy and falsy

Logical operators

Nullish coalescing operator

Logical assignment operators

Solved the Windows Shrink Volume Problem Using AOMEI Partition Assistant to Install Linux Mint

Problem Begins

Why Does This Happen?

What I Tried Before Using AOMEI

1. Disabled Hibernation

2. Disabled Page File

3. Disabled System Protection

4. Defragmented Free Space

5. Tried Safe Mode

Why I Chose AOMEI Partition Assistant

AOMEI Partition Assistant Tool

Step 1

Step 2

Step 3

Step 4

Step 5

Installing Linux Mint

1. Saving Data (`setItem`)

2. Reading Data (`getItem`)

3. Removing Data (`removeItem`)

4. Clearing Everything (`clear`)

2. Listening for Changes (`storage` event)

3. Nesting Elements (The `>` Operator)

4. Multiplication (The `*` Operator)

5. Adding Text Content Inside Tags (Using `{}`)

6. Numbering Items with the Dollar Sign (`$`)