Benchmark: Check indexOf vs. localStorage.getItem()

Script Preparation code:

var checkLocation = 'exmaple.org/path';
localStorage.setItem('visited', 'true');

Tests:

indexOf
checkLocation.indexOf('exmaple.org/path') >= 0
localStorage.getItem()
localStorage.getItem('visited')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
indexOf
localStorage.getItem()

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
indexOf	275898944.0 Ops/sec
localStorage.getItem()	9117010.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):

LLMs can make mistakes. Check important info.

In this benchmark, two approaches for checking the presence of a specified URL in a string are compared: using `String.prototype.indexOf()` and retrieving a value from the `localStorage` API. Here’s a breakdown of what is being tested, the pros and cons of each approach, and any relevant considerations.

### Comparison of Approaches

1. **indexOf Method** 
   - **Test Case**: `checkLocation.indexOf('exmaple.org/path') >= 0`
   - **Functionality**: The `indexOf()` method returns the position of the first occurrence of a specified value in a string, or -1 if not found. In this case, it checks if `'exmaple.org/path'` is contained within `checkLocation`.
   - **Performance Result**: Achieved `275,898,944` executions per second.

2. **localStorage.getItem() Method**
   - **Test Case**: `localStorage.getItem('visited')`
   - **Functionality**: This retrieves the value associated with the key `'visited'` from the browser's local storage. If the key does not exist, it returns `null`.
   - **Performance Result**: Achieved `9,117,010` executions per second.

### Pros and Cons

#### indexOf
- **Pros**:
  - Simple and fast for directly checking string contents.
  - No dependencies on the browser's storage capabilities.

- **Cons**:
  - Only checks for the existence of a substring but doesn't retain state across page reloads.

#### localStorage.getItem()
- **Pros**:
  - Useful for persisting user state or settings across page sessions.
  - Capable of storing larger pieces of data (up to 5-10MB depending on the browser).

- **Cons**:
  - Slower compared to string operations like `indexOf`, as it involves accessing the browser’s storage system.
  - Can introduce potential complexity if used for frequent checks, especially if the key does not exist.

### Other Considerations
- **Usability**: The choice between these two options should depend on the use case. If you simply want to check if a value exists within a string, `indexOf` is more efficient and straightforward. If you're checking a state or configuration value that persists between sessions, `localStorage` is more appropriate despite its performance drawbacks.
  
- **Error Handling**: Using `localStorage` requires an understanding that keys may not always exist, necessitating additional handling in code (e.g., null checks).

### Alternatives
- **Using `includes()`**: Instead of `indexOf`, one could use the `String.prototype.includes()` method, which provides a more readable way to check for the existence of a substring, returning a boolean rather than an index. It nominally performs similarly to `indexOf`.
  
- **Session Storage**: If data only needs to persist for a single session and does not need to survive page refreshes, using `sessionStorage` is an alternative, yet it also has performance implications similar to `localStorage`.

- **JavaScript Objects/Maps**: For non-persistent storage needs, using plain objects or Maps can sometimes yield better performance characteristics since they only involve memory access rather than dealing with browser storage.

In summary, this benchmark provides an insightful comparison between a standard string operation and a browser storage interaction, revealing significant differences in performance that can guide developers in making informed decisions based on their specific use cases.

Related benchmarks:

Check indexOf vs. localStorage.getItem() (version: 1)

Comparing performance of: indexOf vs localStorage.getItem()

Created: 10 months ago by: Guest

Jump to the latest result

indexOf

localStorage.getItem()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):