javascript - When using localstorage to store json objects, I hope to superimpose the value into the storage every time I click. Now every click will overwrite the previous one.

Question

This is the code when saving

    $(".top").click(function(){ 
        var contrastdata = new Object;
        contrastdata.Machinedata = $(this).parents('tr').find('td')[0].innerText;
        contrastdata.UserNamedata = $(this).parents('tr').find('td')[2].innerText;
        contrastdata.InstrumentIDdata = $(this).parents('tr').find('td')[4].innerText;
        localStorage.setItem('contrastdata',JSON.stringify(contrastdata)); 
    }); 

The following is the time to take it

        var contrastdata = JSON.parse(localStorage.getItem('contrastdata'));
        var Machinedata = contrastdata.Machinedata;
        var UserNamedata = contrastdata.UserNamedata;
        var InstrumentIDdata = contrastdata.InstrumentIDdata;

Answer 1

Your idea is wrong. You should first take out the original value from LocalStorage, then superimpose the new data into the original value, and then store it in LocalStorage again. This way there will be no data overwriting

Answer 2

Do you want to save different item for each tr?

Answer 3

Overwriting is because the name does not change every time you save it
You can change it to this
var nums = 0;
$(".top").click(function(){

            var contrastdata = new Object;
            contrastdata.Machinedata = $(this).parents('tr').find('td')[0].innerText;
            contrastdata.UserNamedata = $(this).parents('tr').find('td')[2].innerText;
            contrastdata.InstrumentIDdata = $(this).parents('tr').find('td')[4].innerText;
            localStorage.setItem('contrastdata_'+nums,JSON.stringify(contrastdata)); 
            nums++;
        }); 

When taking the value below, loop based on the value of nums
or change the data structure, use an object to store data, add the data to the object every time you click, and then store the object in localstroage

Answer 4

First take out the data from localStorage and convert it into an object. Remember to make defensive judgments, then insert the value you want to save into the taken out object, and then convert it into a string and store it in localStorage to overwrite the original data;

Answer 5

Read first, then append, then write.

// 读取已存入的数据；
// `|| []`是为了第一次存取时，初始化存入的数据结构，想要追加就得用数组
let temp = JSON.parse(localStorage.getItem('contrastdata')) || [];
// 追加数据
temp.push({
    Machinedata: 'abc',
    UserNamedata: 123
});
    
localStorage.setItem(temp);

Answer 6

At the beginning, first assign the value to the variable, and then perform the operation in the click event. The data does not need to be stored directly for the time being. It will be stored when the page jumps or needs to be stored. Otherwise, it will be saved every time it is clicked. Once, and then take it out, it is very troublesome.

var contrastdata = JSON.parse(localStorage.getItem('contrastdata'));
if(!contrastdata){
   contrastdata = {};
}
$(".top").click(function(){
     contrastdata.Machinedata = $(this).parents('tr').find('td')[0].innerText;
     contrastdata.UserNamedata = $(this).parents('tr').find('td')[2].innerText;
     contrastdata.InstrumentIDdata = $(this).parents('tr').find('td')[4].innerText;
});

//页面做跳转或者需要存的时候再存储
localStorage.setItem('contrastdata',JSON.stringify(contrastdata));

Answer 7

var contrastdata = JSON.parse(localStorage.getItem('contrastdata')),contrastdata1={},contrastdataArr=[];
//如果localStorage.getItem('contrastdata')存在值，就先添加进数组里面
if(contrastdata){
    contrastdataArr.push(contrastdata)
}
$(".top").click(function(){
    //初始化contrastdata1临时变量
     var contrastdata1={};
     //设置contrastdata1
     contrastdata1.Machinedata = $(this).parents('tr').find('td')[0].innerText;
     contrastdata1.UserNamedata = $(this).parents('tr').find('td')[2].innerText;
     contrastdata1.InstrumentIDdata = $(this).parents('tr').find('td')[4].innerText;
     //把contrastdata1添加进contrastdataArr;
     contrastdataArr.push(contrastdata1)
});
//页面关闭时把contrastdataArr存储进localStorage(contrastdata)
localStorage.setItem('contrastdata',JSON.stringify(contrastdataArr));