localStorage ReactJs 在推送时不工作答案

【问题标题】：localStorage ReactJs not working while pushlocalStorage ReactJs 在推送时不工作
【发布时间】：2020-03-08 07:04:11
【问题描述】：

我只是尝试使用 ReactJs 将数组数据存储在 localStorage 中。
代码如下：

storeData(){

    const datas = {
        name : this.state.prevName,
        id : Date.now()
    }

   var localDatas = localStorage.getItem('names');

    if(!localDatas){
        localStorage.setItem('names',JSON.stringify(datas));
    }else{
        var items = [];
        items = JSON.parse(localStorage.getItem('names'));
        items.push(datas);
        localStorage.setItem('names',JSON.stringify(items));
    }
}

当未定义 localDatas 变量时，它是第一次工作。我的意思是当 localStorage 没有设置名称时。
如果第一次运行并且每当我尝试推送新数据时，它都会生成错误。
下面的错误：

TypeError: items.push 不是函数

     }else{
     68 |         var items = [];
     69 |         items = JSON.parse(localStorage.getItem('names'));
     > 70 |         items.push(datas);
     71 | ^         localStorage.setItem('names',JSON.stringify(items));
     72 |     }
     73 | }

如何解决？

【问题讨论】：

您在此处将对象值 items = JSON.parse(localStorage.getItem('names')); 设置为 items，因此现在 items 是一个对象，在下一行您尝试将对象推送到无效的对象中，并且您收到错误为 @ 987654324@..
我也尝试设置这样的对象值 items=[JSON.parse(localStorage.getItem('names'))] 它的工作但是当我推送超过 2 个数据时，它会显示为 [[ {name:"a",id:123123},{name:"b",id:22585}]] 索引为@Maniraj

标签： javascript reactjs local-storage

【解决方案1】：

当第一个localDatas 未定义时，它将localStorage 项设置为对象，而不是数组。

第二次调用这个函数，items 是一个对象而不是一个数组，因此没有 .push 给他。

        var items = []; // items is array
        items = JSON.parse(localStorage.getItem('names')); // items is now OBJECT!!
        items.push(datas); // can't do a .push to an object
        localStorage.setItem('names',JSON.stringify(items));

您可以将datas 设为一个数组，一切都应该正常工作。

    const datas = [{
    name : this.state.prevName,
    id : Date.now()
}]

修复： 由于 datas 现在是一个数组，我们只想推送里面的对象，而不是： items.push(datas); 应该是：items.push(datas[0]);

【讨论】：

这样生成 0: {name: "a", id: 1583652932860} 1: [{name: "v", id: 1583652934471}] 2: [{name: "s", id: 1583652936472}] 3: [{name: "adfasf", id: 1583652944449}]
修复：当你将datas 推送到items 时，使用这个：items.push(datas[0]);

【解决方案2】：

问题在于 JSON.parse 返回一个对象（不是数组）。作为一个对象，它没有任何“推送”方法。

您可以通过确保“数据”以数组开头来解决此问题：

let storeData = () => {

    const datas = [{
        name : this.state.prevName,
        id : Date.now()
    }]

   var localDatas = localStorage.getItem('names');

    if(!localDatas) {
        localStorage.setItem('names',JSON.stringify(datas));
    } else {
        var items = [];
        items = JSON.parse(localStorage.getItem('names'))
        items.push(datas);
        localStorage.setItem('names',JSON.stringify(items));
    }
}

【讨论】：