Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
window.localStorage.setItem
(version: 1)
Comparing performance of:
window.localStorage.setItem vs Control
Created:
one year ago
by:
Guest
Jump to the latest result
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
Test name
Executions per second
window.localStorage.setItem
136666.0 Ops/sec
Control
91465352.0 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
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.
Related benchmarks:
Assigning new variable
Luxon vs
testingqueries
test early return
Query Element
Nested Json stringify speed test
Test id vs next sibbling
Test content attribute vs html element
test PIMEc event
Comments
Confirm delete:
Do you really want to delete benchmark?