Benchmark: State on localStorage

Script Preparation code:

localStorage.setItem('__test', JSON.stringify({
    "_id": "65a68b3d6d5d92940d0c1a36",
    "index": 0,
    "guid": "08f8e038-080e-4d27-b78d-a793eb1036e9",
    "isActive": false,
    "balance": "$2,179.11",
    "picture": "http://placehold.it/32x32",
    "age": 21,
    "eyeColor": "blue",
    "name": "Katharine Stark",
    "gender": "female",
    "company": "IMKAN",
    "email": "katharinestark@imkan.com",
    "phone": "+1 (908) 522-2409",
    "address": "920 Seeley Street, Sanford, Montana, 506",
    "about": "Eiusmod consectetur ad esse pariatur veniam eu velit velit reprehenderit. Sint mollit anim elit Lorem nulla sint Lorem culpa laboris culpa veniam aute. Cupidatat aliqua reprehenderit incididunt consequat consectetur aute non cillum excepteur incididunt sint cupidatat nisi. Sunt quis enim magna nisi nostrud sint irure cupidatat aute. Sunt nulla laboris ea Lorem incididunt ea ipsum anim consequat nostrud do laboris do.\r\n",
    "registered": "2016-06-26T07:49:33 -02:00",
    "latitude": -38.923375,
    "longitude": 94.843971,
    "tags": [
      "anim",
      "eiusmod",
      "do",
      "excepteur",
      "ut",
      "officia",
      "adipisicing"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Sweet Macdonald"
      },
      {
        "id": 1,
        "name": "Savannah Booth"
      },
      {
        "id": 2,
        "name": "Benton Hatfield"
      }
    ],
    "greeting": "Hello, Katharine Stark! You have 8 unread messages.",
    "favoriteFruit": "strawberry"
  }))

Tests:

Store
localStorage.setItem('__test', JSON.stringify({ "_id": "65a68b3d6d5d92940d0c1a36", "index": 0, "guid": "08f8e038-080e-4d27-b78d-a793eb1036e9", "isActive": false, "balance": "$2,179.11", "picture": "http://placehold.it/32x32", "age": 21, "eyeColor": "blue", "name": "Katharine Stark", "gender": "female", "company": "IMKAN", "email": "katharinestark@imkan.com", "phone": "+1 (908) 522-2409", "address": "920 Seeley Street, Sanford, Montana, 506", "about": "Eiusmod consectetur ad esse pariatur veniam eu velit velit reprehenderit. Sint mollit anim elit Lorem nulla sint Lorem culpa laboris culpa veniam aute. Cupidatat aliqua reprehenderit incididunt consequat consectetur aute non cillum excepteur incididunt sint cupidatat nisi. Sunt quis enim magna nisi nostrud sint irure cupidatat aute. Sunt nulla laboris ea Lorem incididunt ea ipsum anim consequat nostrud do laboris do.\r\n", "registered": "2016-06-26T07:49:33 -02:00", "latitude": -38.923375, "longitude": 94.843971, "tags": [ "anim", "eiusmod", "do", "excepteur", "ut", "officia", "adipisicing" ], "friends": [ { "id": 0, "name": "Sweet Macdonald" }, { "id": 1, "name": "Savannah Booth" }, { "id": 2, "name": "Benton Hatfield" } ], "greeting": "Hello, Katharine Stark! You have 8 unread messages.", "favoriteFruit": "strawberry" }))
Retrieve
JSON.parse(localStorage.getItem('__test'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Store
Retrieve

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
Store	109799.1 Ops/sec
Retrieve	361768.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared options, pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark is comparing two operations:

1. **Store**: This test case creates an object in `localStorage` with some sample data using `localStorage.setItem()`. The purpose is to simulate storing data in local storage.
2. **Retrieve**: This test case retrieves the same object from `localStorage` using `JSON.parse(localStorage.getItem('__test'))`. The goal is to measure how quickly this data can be retrieved.

**Options compared**

The two options being compared are:

1. **Store**: Using `localStorage.setItem()` to store the data.
2. **Retrieve**: Using `JSON.parse(localStorage.getItem('__test'))` to retrieve the data.

**Pros and Cons of each approach:**

**Store (localStorage.setItem())**

Pros:

* Simple and straightforward implementation
* Easy to understand and maintain

Cons:

* May be slower than other methods due to the overhead of serializing the object and updating `localStorage`
* Can lead to unnecessary storage usage if not properly cleared

**Retrieve (JSON.parse(localStorage.getItem('__test')))**

Pros:

* Faster execution time since it only retrieves the data without creating a new object
* Avoids unnecessary storage usage

Cons:

* More complex implementation due to the need to parse the JSON string
* May be more prone to errors if not handled correctly

**Other considerations:**

* **Memory usage**: Both approaches can lead to increased memory usage over time, but `Store` may be worse since it creates a new object in `localStorage`.
* **Concurrency**: If multiple threads or processes are accessing the same `localStorage`, this benchmark may not accurately represent real-world scenarios.

**Library used**

In the provided code snippet, there is no explicit mention of a library being used. However, `JSON.parse()` and `localStorage` are built-in JavaScript functions.

**Special JS feature/syntax**

There is no special JavaScript feature or syntax explicitly mentioned in this benchmark.

Now that I've explained the benchmark, if you're interested in running it yourself, here's some sample code to get you started:

```javascript
// Store test case
function storeTest() {
  const data = { foo: 'bar', baz: 42 };
  localStorage.setItem('__test', JSON.stringify(data));
}

// Retrieve test case
function retrieveTest() {
  return JSON.parse(localStorage.getItem('__test'));
}

// Benchmarking loop
for (let i = 0; i < 10000; i++) {
  storeTest();
  const retrievedData = retrieveTest();
}

// Measure execution time
const startTime = performance.now();
for (let i = 0; i < 10000; i++) {
  storeTest();
  const retrievedData = retrieveTest();
}
const endTime = performance.now();

console.log(`Store executions per second: ${10000 / endTime}`);
console.log(`Retrieve executions per second: ${10000 / endTime}`);
```

Keep in mind that this is a simplified example, and you may want to add more features, such as error handling or caching, depending on your specific use case.

Related benchmarks:

State on localStorage (version: 0)

Comparing performance of: Store vs Retrieve

Created: 2 years ago by: Guest

Jump to the latest result

Store

Retrieve

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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