时间戳

首页 > 解决方案 > localStorage ReactJs 在推送时不工作

javascript - localStorage ReactJs 在推送时不工作

问题描述

我只是尝试使用 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 | }

如何解决这个问题？

标签： javascriptreactjslocal-storage

解决方案

当 firstlocalDatas未定义时，它将 localStorage 项设置为object，而不是 array。

第二次调用这个函数时，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()
}]

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

推荐阅读