What Is the Max Size of Localstorage Values?

What is the max size of localStorage values?

When working with JavaScript, you may come across a situation where you need to store data locally on the client-side. One popular option for achieving this is by using the localStorage object. It allows you to store key-value pairs in the browser’s local storage, making it accessible even after the browser is closed and reopened.

However, there is a limitation on the size of data that can be stored in localStorage. Different browsers have different limits, so it’s important to be aware of these limitations to avoid any unexpected issues.

Browser-specific limitations

Let’s take a look at the maximum size of localStorage values for some popular browsers:

Google Chrome: The maximum size of a localStorage value is around 10MB.
Mozilla Firefox: The maximum size of a localStorage value is around 5MB.
Microsoft Edge: The maximum size of a localStorage value is around 10MB.
Safari: The maximum size of a localStorage value is around 5MB.

It’s important to note that these limitations are not per key-value pair, but rather the total size of all the data stored in localStorage for a particular domain.

Handling large data

If you need to store large amounts of data that exceed the localStorage limitations, there are a few strategies you can consider:

Compression: You can compress the data before storing it in localStorage and then decompress it when retrieving it. This can help reduce the overall size of the data.
Splitting the data: If possible, you can split the data into smaller chunks and store them separately in localStorage. This way, you can work with smaller sizes that fit within the limitations.
Using IndexedDB: IndexedDB is a more powerful client-side storage option that allows you to store larger amounts of data compared to localStorage. It provides a structured database-like approach for storing and retrieving data.

Code examples

Here’s an example of how you can store and retrieve data using localStorage:

// Storing data in localStorage
localStorage.setItem('key', 'value');

// Retrieving data from localStorage
const value = localStorage.getItem('key');
console.log(value); // Output: value

If you need to compress the data before storing it, you can use a library like pako:

// Compressing data before storing in localStorage
const data = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
const compressedData = pako.deflate(data, { to: 'string' });

localStorage.setItem('key', compressedData);

// Decompressing data when retrieving from localStorage
const storedData = localStorage.getItem('key');
const decompressedData = pako.inflate(storedData, { to: 'string' });

console.log(decompressedData); // Output: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Remember to include the pako library in your project if you decide to use data compression.

Conclusion

The maximum size of localStorage values varies across different browsers, with Google Chrome and Microsoft Edge allowing around 10MB, while Firefox and Safari limit it to around 5MB. If you need to store larger amounts of data, consider compressing the data, splitting it into smaller chunks, or using IndexedDB as an alternative storage option. By understanding these limitations and exploring different strategies, you can effectively work with localStorage and overcome any size restrictions.

What Is the Max Size of Localstorage Values?