Using Local Storage to store arrays in JavaScript/jQuery

Question

Using Local Storage to store arrays in JavaScript/jQuery

Currently, I am implementing a set of multiple buttons each containing data-id and data-name

Below is my concept along with some sample code for reference:

$(".clickCompare").click(function ({
      var id = $(this).attr('data-id');
      var name = $(this).attr('data-name');           

      var datas = [id , name];
      localStorage["datas"] = JSON.stringify(datas);
      var stored_datas = JSON.parse(localStorage["datas"]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="clickCompare btn btn-primary" data-id="1" data-name="Sample1">Compare</button>
<button type="button" class="clickCompare btn btn-primary" data-id="2" data-name="Sample2">Compare</button>
<button type="button" class="clickCompare btn btn-primary" data-id="3" data-name="Sample3">Compare</button>

The objective is to capture the data-id and data-name values into the 'datas' variable every time a button with the class 'clickCompare' is clicked. This allows for easy retrieval of these values when needed.

If the ID already exists in the storage, it will not overwrite the variable datas.

javascript jquery stringify

Answer 1

Answer №1

One potential solution is to store an array of objects (tuple) for the desired data. For example, you can define datas as follows:

let datas = [{id: 1, name: 'first'}, {id: 2, name: 'second'}];

By doing this, each click event can trigger the addition of a new item to the array. To achieve this functionality, you can implement a function like the one below:

$(".clickCompare").click(() =>{
    let id = $(this).attr('data-id');
    let name = $(this).attr('data-name');  
    let datas = [];

    if(localStorage.key('datas')){
        datas = JSON.parse(localStorage.getItem('datas'));
    }

    if(!datas.filter(x => x.id == id)){
        datas.push({id: id, name: name});
    }

    localStorage.setItem('datas', JSON.stringify(datas));
    console.log(localStorage.getItem('datas')); //to remvoe after testing
});

Answer 2

One potential solution is to store an array of objects (tuple) for the desired data. For example, you can define datas as follows:

let datas = [{id: 1, name: 'first'}, {id: 2, name: 'second'}];

By doing this, each click event can trigger the addition of a new item to the array. To achieve this functionality, you can implement a function like the one below:

$(".clickCompare").click(() =>{
    let id = $(this).attr('data-id');
    let name = $(this).attr('data-name');  
    let datas = [];

    if(localStorage.key('datas')){
        datas = JSON.parse(localStorage.getItem('datas'));
    }

    if(!datas.filter(x => x.id == id)){
        datas.push({id: id, name: name});
    }

    localStorage.setItem('datas', JSON.stringify(datas));
    console.log(localStorage.getItem('datas')); //to remvoe after testing
});

Answer 3

Answer №2

Implementing key-value pair usage instead of an array can enhance functionality -

$(".clickCompare").click(function() {
  var id = $(this).attr('data-id');
  var stored_datas = localStorage["datas"];
  if (!stored_datas) {
    stored_datas = "{}";
  }
  var datas = JSON.parse(stored_datas);
  var existingData = datas[id];
  if (existingData) {
    console.log(`The data for id ${id} already exists: ${existingData}`);
    return;
  }
  var name = $(this).attr('data-name');
  datas[id] = name;
  var json = JSON.stringify(datas);
  localStorage["datas"] = json;
  console.log(`Added new data for id ${id}: ${name}`);
  var stored_datas = JSON.parse(localStorage["datas"]);
  console.log(`Content in Local Storage: ${json}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="clickCompare btn btn-primary" data-id="1" data-name="Sample1">Compare</button>
<button type="button" class="clickCompare btn btn-primary" data-id="2" data-name="Sample2">Compare</button>
<button type="button" class="clickCompare btn btn-primary" data-id="3" data-name="Sample3">Compare</button>

To view the demo since stackoverflow restricts localStorage, access this link

Answer 4

Implementing key-value pair usage instead of an array can enhance functionality -

$(".clickCompare").click(function() {
  var id = $(this).attr('data-id');
  var stored_datas = localStorage["datas"];
  if (!stored_datas) {
    stored_datas = "{}";
  }
  var datas = JSON.parse(stored_datas);
  var existingData = datas[id];
  if (existingData) {
    console.log(`The data for id ${id} already exists: ${existingData}`);
    return;
  }
  var name = $(this).attr('data-name');
  datas[id] = name;
  var json = JSON.stringify(datas);
  localStorage["datas"] = json;
  console.log(`Added new data for id ${id}: ${name}`);
  var stored_datas = JSON.parse(localStorage["datas"]);
  console.log(`Content in Local Storage: ${json}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="clickCompare btn btn-primary" data-id="1" data-name="Sample1">Compare</button>
<button type="button" class="clickCompare btn btn-primary" data-id="2" data-name="Sample2">Compare</button>
<button type="button" class="clickCompare btn btn-primary" data-id="3" data-name="Sample3">Compare</button>

To view the demo since stackoverflow restricts localStorage, access this link

Using Local Storage to store arrays in JavaScript/jQuery

Answer №1

Answer №2

Similar questions

JavaScript and jQuery are lightning fast, especially when the page is reloaded

Error: The build process for Next.js using the command `npm run build`

What is the fallback mechanism in Astro js when the cache is unavailable?

What is the best way to access attributes from a div element?

The issue arises with loading data from the server due to lack of definition of Mongo

How can I remove a row from an MVC webgrid using an ajax call?

Automatically updating numbers upon adding input with jquery for a dynamic user experience

Making numerous changes to a single field in mongoDB can result in the error message: "Attempting to edit the path 'X' will generate a conflict at 'X'."

What causes the low Performance score of a default NextJS Application with no content?

What is the method for striking through a line in a table?

Node.js Monitoring Statistics Displayed in Command Line Interface

Changing pricing on pricing table with a click

Modify the class's height by utilizing props

What is the best way to transform an array of objects into a nested array through shuffling

Only display entries with no content

Cross-Origin Resource Sharing (CORS) verification for WebSocket connections

Saving multiple selected boxes based on a process using jQuery, PHP, and Ajax

Navigating a collection of objects after a button is clicked

Subcomponent in React is not rendering as expected

Enabling communication between JavaScript and PHP and vice versa