用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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 7

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

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 8

提供给你一个自己写的公共方法，以验证。向localStorage中追加内容，不覆盖，且元素stringify后如果相同，则不追加

    appendLocal(key, obj) {
        if(obj == null) return;
        let temp, tempStr = '';
        try {
            if(localStorage.getItem(key) == null) throw new Error('空或undefined')
            temp = JSON.parse(localStorage.getItem(key));
        } catch(err) {
            // 当localStorage中没有对应key，或key对应内容为空、undefined，或parse出错时
            temp = [];
        }
        temp = temp.map((item) => {
            return JSON.stringify(item);
        });
        // 去重
        if(temp.indexOf(JSON.stringify(obj)) === -1) temp.push(JSON.stringify(obj));
        temp.forEach((item, index, arr) => {
            arr.length === index + 1 ? tempStr += `${item}` : tempStr += `${item},`;
        });
        localStorage.setItem(key, `[${tempStr}]`);
    }