Benchmark: localStorage vs sessionStorage vs Reading a Hardcoded Array Speedtest

Script Preparation code:

localStorage.setItem('foo', 'bar')
sessionStorage.setItem('foo', 'bar')
var ARR = ['bar'];

Tests:

Control
var FOO = 'bar';
localStorage
var FOO = localStorage.getItem('foo');
sessionStorage
var FOO = sessionStorage.getItem('foo');
Read Array
var FOO = ARR[Math.floor(Math.random() * ARR.length)]

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 runs

Control

169.8M/s

localStorage

4.8M/s

Read Array

4.6M/s

sessionStorage

4.0M/s

Fastest: Control (42.2x faster)

View exact numbers

✓ Control: 169,783,072 ops/sec
• localStorage: 4,753,024 ops/sec
• Read Array: 4,580,720 ops/sec
• sessionStorage: 4,025,753 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Control
localStorage
sessionStorage
Read Array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 141 on Android

View result in a separate tab

Control

54.8M/s

Read Array

26.8M/s

localStorage

1.7M/s

sessionStorage

1.7M/s

View exact numbers

Test name	Executions per second
✓ Control	54,826,064 Ops/sec
Read Array	26,760,460 Ops/sec
localStorage	1,702,287 Ops/sec
sessionStorage	1,699,220 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**Benchmark Definition**

The website measures JavaScript performance in various scenarios, including comparing different storage options (localStorage, sessionStorage) and accessing an array of values.

**Options Compared**

Three main options are compared:

1. **Reading from a hardcoded array**: This option tests how fast the browser can access a fixed array of values.
2. **Reading from localStorage**: This option tests how fast the browser can read data stored in local storage.
3. **Reading from sessionStorage**: This option tests how fast the browser can read data stored in session storage.

**Pros and Cons**

* **Hardcoded Array Read**: This approach provides a baseline for comparison, as it doesn't rely on external data stores. However, it might not reflect real-world scenarios where data is constantly changing.
* **localStorage Read**: Using local storage allows for storing and retrieving data locally, which can be useful in applications that need to store small amounts of data. However, accessing local storage can be slower due to the need to parse and serialize data.
* **sessionStorage Read**: Similar to localStorage, using session storage allows for storing and retrieving data locally. However, it has a shorter lifetime than local storage (session storage is tied to the session) and might not be suitable for applications that need to store data across multiple sessions.

**Library Usage**

The test cases use two libraries:

1. **localStorage**: This is a built-in JavaScript API for storing small amounts of data locally on the client-side.
2. **sessionStorage**: This is also a built-in JavaScript API for storing small amounts of data locally on the client-side, but it has a shorter lifetime than localStorage.

**Special JS Features or Syntax**

The test cases use some special syntax:

1. **Template literals**: The hardcoded array read option uses template literals (`var ARR = ['bar'];`) to define an array of values.
2. **Math.random()**: The hardcoded array read option uses `Math.random()` to generate a random index for accessing the array.

**Other Considerations**

When using local storage or session storage, it's essential to consider data sizes and types, as they can impact performance. Additionally, some browsers might have specific settings or configurations that affect local storage and session storage performance.

**Alternatives**

If you need to compare different storage options or accessing arrays, here are some alternative approaches:

1. **Use a caching layer**: Instead of using local storage or session storage, consider implementing a caching layer (e.g., Redis, Memcached) to store data.
2. **Choose a database**: If you need to store larger amounts of data, consider using a database like SQLite or IndexedDB.
3. **Optimize array access**: Instead of accessing an array randomly, consider optimizing your code to use a more efficient algorithm for accessing arrays (e.g., binary search).

localStorage vs sessionStorage vs Reading a Hardcoded Array Speedtest (version: 0) Benchmark.js

Comparing performance of: `Control vs localStorage vs sessionStorage vs Read Array`

Created: 6 years ago by: Guest

Go to the latest result

Control

localStorage

sessionStorage

Read Array

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

localStorage vs sessionStorage vs Reading a Hardcoded Array Speedtest (version: 0) Benchmark.js

Comparing performance of: Control vs localStorage vs sessionStorage vs Read Array

Created: 6 years ago by: Guest

Go to the latest result

Control

localStorage

sessionStorage

Read Array

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `Control vs localStorage vs sessionStorage vs Read Array`