时间戳

首页 > 解决方案 > 当第一次将数据存储在 localstorage 中时，它将被存储，但第二次我尝试存储时，它显示错误 push is not function 为什么？

javascript - 当第一次将数据存储在 localstorage 中时，它将被存储，但第二次我尝试存储时，它显示错误 push is not function 为什么？

问题描述

html代码

<body>
    <input type="text" id="userName">
    <button onclick="empShow()">Click</button>
</body>
<script src="script.js"></script>

Javascript代码

function empShow(){
    let emp=[];
    let name=document.getElementById('userName').value;
    let data={UserName:name};
     emp=JSON.parse(localStorage.getItem('empData')) || [];
    emp.push(data); //when i try to push data second time it display emp.push is not function.
    localStorage.setItem('empData',JSON.stringify(data));
}

当我更改 localstroge 键时，它会被存储，但第二次运行时会显示错误。

标签： javascripthtml

解决方案

在 localStorage 中第一次插入数据时：

localStorage.getItem('empData')

是null。现在在那个（第一次）时间，

null || []

导致[]. 即一个数组。

然后在下一行中，您在数组上调用了 push 方法。有效。然而第二次，

localStorage.getItem('empData')

不为空。让我们考虑一下您第一次在文本框中输入“测试”的情况。所以值localStorage.getItem('empData')变成了'{"UserName":"test"}'。

将字符串值解析为 JSON 对象转换的变量 emp JSON 变量。一个 JSON 值与空数组 [] 进行了 OR 运算，这一次得到了 JSON 本身，它不是一个数组，也没有 push 方法。结果，您收到了该错误。

推荐阅读