javascript - 用localstorage存json对象的时候 希望实现每次点击 把值一直叠加到储存里面 现在每次点击会覆盖掉之前的

Question

这是存的时候的代码

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

下面是取的时候

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

Answer 1

你这思路不对，应该先从LocalStorage取出原来的值，然后将新数据叠加到原来的值中，然后再次存入LocalStorage。这样就不会出现数据覆盖了

Answer 2

你是想每个tr都存不同的item吗？

Answer 3

覆盖是因为你每次存储时名字没变
你可以改成这样
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++;
        }); 

下边取值的时候再根据nums的值循环
或者是改变数据结构，用一个对象存储数据，每次点击把数据加到对象里面，然后把对象存进localstroage里面

Answer 4

先从localStorage取出数据转换成对象，记得做防御判断，然后把想要存的值插入到取出来的对象中去，然后转换成字符串存入localStorage覆盖原来的数据；

Answer 5

先读取，然后追加，再写入。

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

Answer 6

在一开始的时候先取值赋给变量，然后在点击事件里面去进行操作，数据暂时不需要直接去存储，在跳转页面或者需要存储的时候再进行存储，不然每次点击的时候存一下，然后取一下，很麻烦。

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));