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)]

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: 3 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Control	177601408.0 Ops/sec
localStorage	6511226.0 Ops/sec
sessionStorage	6154647.0 Ops/sec
Read Array	66906828.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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).

Related benchmarks:

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

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

Created: 5 years ago by: Guest

Jump to the latest result

Control

localStorage

sessionStorage

Read Array

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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