Benchmark: window.localStorage.setItem

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

window.localStorage.setItem
window.localStorage.setItem("data", '{"attributes.support_case_state":{"type":"string_or_null_array","value":["open"]},"attributes.tier":{"type":"string_or_null_array","value":["tier_1"]},"attributes.user_persona":{"type":"string_or_null_array","value":["rider"]},"attributes.country_code":{"type":"string_or_null_array","value":["az"]},"attributes.city_id":{"type":"number_or_null_array","value":[211]},"attributes.safety_severity_level":{"type":"string_or_null_array","value":["minor"]}}');
Control
var a = "foo";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
window.localStorage.setItem
Control

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Control

91.5M/s

window.localStorage.setItem

137K/s

View exact numbers

Test name	Executions per second
✓ Control	91,465,352 Ops/sec
window.localStorage.setItem	136,666 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of the `window.localStorage.setItem` method, which is part of the Web Storage API used in JavaScript. The benchmark consists of two test cases:

1. **window.localStorage.setItem**: This test measures the time it takes to store a specific JSON string in the local storage using the `setItem` method. It sets the key "data" with a complex nested structure consisting of attributes related to a user persona.

2. **Control**: This serves as a baseline comparison and simply assigns the string "foo" to the variable `a`. This is a lightweight operation that is expected to execute very quickly.

### Options Compared
- **Local Storage Set Item**: This operation involves serializing a JSON object and writing it to the browser's local storage. The JSON string is quite large and represents various attributes like support case state, tier, user persona, country code, city ID, and safety severity level.
  
- **Control Case**: The control simply checks the speed of a basic assignment operation as a performance baseline.

### Pros and Cons
- **Pros of `localStorage.setItem`**:
  - **Persistent Storage**: Data written to local storage persists even after the browser is closed and reopened, which is useful for storing user preferences or session data.
  - **Asynchronous Access**: While the storage operations are synchronous, data can be accessed asynchronously from local storage, allowing for more complex applications.

- **Cons of `localStorage.setItem`**:
  - **Performance Overhead**: Writing larger amounts of data (like the complex JSON string) to local storage introduces latency, which is indicated by the significant drop in executions per second compared to the control case.
  - **Synchronous Operations**: Local storage operations are blocking, meaning they can freeze the UI if they take too long. This can lead to a poor user experience if used frequently or with large data.

### Other Considerations
- **Data Size Limitations**: Browsers generally impose limits on the size of data that can be stored in local storage (usually around 5-10MB per domain). This is important when planning how to structure your application's data storage.
- **Data Security**: Local storage is accessible from JavaScript running on the same origin. Therefore, sensitive data should not be stored in local storage unless adequately protected.
- **Alternatives**: Depending on the needs of the application, alternatives to `localStorage` could include:
  - **Session Storage**: Similar to `localStorage`, but data is cleared when the page session ends.
  - **IndexedDB**: A more complex and powerful storage mechanism that allows for storing larger amounts of structured data and offers asynchronous access.
  - **WebSQL**: An older API for managing databases in browsers, but it's deprecated and not recommended for use in new projects.

### Test Results Analysis
From the benchmark results:
- The `Control` test achieved approximately **91.47 million executions per second**, indicating its fast execution time for a simple variable assignment.
- The `window.localStorage.setItem` test resulted in roughly **136.67 thousand executions per second**, showcasing the significant overhead of storing data in local storage compared to a simple operation.

This stark difference illustrates the performance impact of more complex operations in browsers, particularly when dealing with storage that involves serialization and potential UI blocking due to synchronous behavior.

window.localStorage.setItem (version: 1)

Comparing performance of: `window.localStorage.setItem vs Control`

Created: one year ago by: Guest

Go to the latest result

window.localStorage.setItem

Control

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

window.localStorage.setItem (version: 1)

Comparing performance of: window.localStorage.setItem vs Control

Created: one year ago by: Guest

Go to the latest result

window.localStorage.setItem

Control

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

Comparing performance of: `window.localStorage.setItem vs Control`