JS/jQuery Local Storage array

Question

Currently I have this multiple button with data-id and data-name

Here's my idea and sample code

$(".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>

What I'm trying to do is to store the data-id and data-name on variable datas every click of clickCompare class. So that I can call them whenever I want.

And if the ID already exists it will not store on variable datas

Is there an error?

react_or_angluar
– react_or_angluar

2020-12-09 03:47:29 +00:00
Commented Dec 9, 2020 at 3:47 — react_or_angluar
– react_or_angluar, Commented Dec 9, 2020 at 3:47

Víctor Hugo Lara Santillán · Accepted Answer · 2020-12-09 05:50:41Z

1

I think what you want to do is to save an array of objects (tuple). In this case datas should be something like

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

so each time you click you can add a new item in the array. To do that, you can check if there's an item in the array with that id. Use a function like this

$(".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
});

answered Dec 9, 2020 at 5:50

Víctor Hugo Lara Santillán

291 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikhil Patil · Accepted Answer · 2020-12-09 05:54:17Z

0

Create key value pair instead of array as below -

$(".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(`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(`Local Storage content - ${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>

Since stackoverflow disables localStorage for snippets, refer link for demo

answered Dec 9, 2020 at 5:54

Nikhil Patil

2,5331 gold badge9 silver badges20 bronze badges

2 Comments

Pablo Over a year ago

the output should be something like this {id: 1, name: 'first'}, {id: 2, name: 'second'} right

Nikhil Patil Over a year ago

No it will store it like - {"1": "Sample1","2":"Sample2","3":"Sample3"}, but you can also do it the way you mentioned, by changing some code.

Collectives™ on Stack Overflow

JS/jQuery Local Storage array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related