Benchmark: setting localStorage

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

Script Preparation code:

//constant
window.itemOptions = {
	'1': '1',
  	'2': '2',
  	'3': '3',
  	'4': '4',
};

//example object
window.stateObject = {
	item1: '00000',
  	item2: '50',
  	item3: [],
  	item4: [window.itemOptions['1']],
  	item5: [],
};

localStorage.setItem('stateObject', JSON.stringify(window.stateObject));

Tests:

setting localStorage unconditionally (simulating 1 React rerender after mount)
localStorage.setItem('stateObject', JSON.stringify(window.stateObject)); localStorage.setItem('stateObject', JSON.stringify(window.stateObject));
setting localStorage conditionally (simulating 1 React rerender after mount)
const storedState = JSON.parse(localStorage.getItem('stateObject')); if (!_.isEqual(window.stateObject, storedState)) { localStorage.setItem('stateObject', JSON.stringify(window.stateObject)); } if (!_.isEqual(window.stateObject, storedState)) { localStorage.setItem('stateObject', JSON.stringify(window.stateObject)); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setting localStorage unconditionally (simulating 1 React rerender after mount)
setting localStorage conditionally (simulating 1 React rerender after mount)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:146.0) Gecko/20100101 Firefox/146.0

Browser/OS: Firefox 146 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
setting localStorage unconditionally (simulating 1 React rerender after mount)	772523.6 Ops/sec
setting localStorage conditionally (simulating 1 React rerender after mount)	468538.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a benchmark test for measuring the efficiency of setting `localStorage` with and without a conditional deep equals check. The test is designed to simulate a React application's behavior, specifically when dealing with component re-renders.

**Tested Options**

Two options are being compared:

1. **Unconditional Setting**: In this scenario, the application sets `localStorage` unconditionally after every React re-render, without checking if the stored state has changed.
2. **Conditional Setting with Deep Equals Check**: This option uses a library called Lodash (specifically, its `_isEqual()` function) to compare the stored state with the current state. If they are not equal, the application sets `localStorage` again.

**Pros and Cons of Each Approach**

1. **Unconditional Setting**:
	* Pros: Simple, easy to implement, and may be faster in some cases since it doesn't require comparing the states.
	* Cons: May lead to unnecessary writes to `localStorage`, potentially causing performance issues or increasing storage usage.
2. **Conditional Setting with Deep Equals Check**:
	* Pros: Ensures data consistency by checking if the stored state has changed, reducing unnecessary writes to `localStorage`.
	* Cons: Adds complexity and may introduce additional overhead due to the deep equals check.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides various functions for tasks such as string manipulation, array manipulation, and object comparison. In this test, it's used to implement the `_isEqual()` function, which checks if two objects are deeply equal.

**Special JS Feature/ Syntax**

There doesn't appear to be any special JavaScript features or syntax used in this benchmark. However, some basic JavaScript concepts like functions, variables, and conditional statements are utilized.

**Other Alternatives**

If you're looking for alternatives to the Lodash `_isEqual()` function, you can consider using other libraries or implementing your own deep equals check. Some popular alternatives include:

1. **JSON Schema**: A library that provides data validation and comparison functions.
2. **DeepEqual**: A small library specifically designed for deep object equality checks.
3. **Manual Implementation**: You could implement a custom deep equals check function using JavaScript's built-in `Object.prototype.toString()` method or by recursively iterating through object properties.

Keep in mind that the choice of alternative depends on your specific requirements and performance considerations.

Related benchmarks:

setting localStorage (version: 0)

testing efficiency of setting localStorage with and without conditional deep equals check

Comparing performance of: setting localStorage unconditionally (simulating 1 React rerender after mount) vs setting localStorage conditionally (simulating 1 React rerender after mount)

Created: 3 years ago by: Guest

Jump to the latest result

setting localStorage unconditionally (simulating 1 React rerender after mount)

setting localStorage conditionally (simulating 1 React rerender after mount)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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