Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to find the size of localStorage in HTML?
localStorage is used to persist information across multiple sessions. It has a maximum size of 5MB in most browsers and stores data as key-value pairs.
Understanding localStorage Size Calculation
Each character in localStorage is stored as UTF-16, taking 2 bytes. To calculate the size, we multiply the string length by 2 and convert to MB.
Example: Calculate localStorage Size
You can try to run the following code snippet to check the size allocated:
<!DOCTYPE html>
<html>
<head>
<title>localStorage Size Calculator</title>
</head>
<body>
<h3>localStorage Size Breakdown</h3>
<div id="output"></div>
<script>
// Add some sample data to localStorage
localStorage.setItem('user', 'John Doe');
localStorage.setItem('preferences', JSON.stringify({theme: 'dark', lang: 'en'}));
localStorage.setItem('cache', 'some cached data here');
var sum = 0;
var output = document.getElementById('output');
var html = '';
// Loop through localStorage items
for(var i in localStorage) {
if(localStorage.hasOwnProperty(i)) {
var keySize = (i.length * 2) / 1024 / 1024;
var valueSize = (localStorage[i].length * 2) / 1024 / 1024;
var totalSize = keySize + valueSize;
sum += totalSize;
html += i + " = " + totalSize.toFixed(4) + " MB<br>";
}
}
html += "<strong>Total = " + sum.toFixed(4) + " MB</strong>";
output.innerHTML = html;
</script>
</body>
</html>
user = 0.0000 MB preferences = 0.0001 MB cache = 0.0000 MB Total = 0.0001 MB
Alternative: Function-Based Approach
<!DOCTYPE html>
<html>
<body>
<button onclick="calculateSize()">Calculate localStorage Size</button>
<div id="result"></div>
<script>
function calculateSize() {
let total = 0;
let details = '';
for(let key in localStorage) {
if(localStorage.hasOwnProperty(key)) {
let size = (key.length + localStorage[key].length) * 2; // bytes
let sizeMB = size / 1024 / 1024;
total += sizeMB;
details += key + ': ' + sizeMB.toFixed(4) + ' MB<br>';
}
}
document.getElementById('result').innerHTML =
details + '<strong>Total: ' + total.toFixed(4) + ' MB</strong>';
}
// Add sample data
localStorage.setItem('sample1', 'Hello World');
localStorage.setItem('sample2', JSON.stringify({id: 1, name: 'Test'}));
</script>
</body>
</html>
Key Points
- localStorage stores data as UTF-16 strings (2 bytes per character)
- Size calculation: (string.length × 2) ÷ 1024 ÷ 1024 = MB
- Include both key and value lengths in total size calculation
- Use hasOwnProperty() to avoid prototype properties
Browser Size Limits
| Browser | localStorage Limit |
|---|---|
| Chrome, Firefox, Safari | 5-10 MB |
| Internet Explorer | 5 MB |
| Mobile Browsers | 2.5-5 MB |
Conclusion
Calculate localStorage size by measuring both keys and values in UTF-16 encoding. Monitor usage to stay within browser limits and ensure optimal performance.
Updated on: 2026-03-15T23:18:59+05:30
726 Views
Advertisements