javascript - 为什么 chrom 的控制台->应用程序->localStorage 中显示 null

Question

我正在使用下面的代码，并且在我的 chrome 本地存储区域中 storeArrObj 的实际值之前显示 null 。这是为什么 ？

完整代码

<label>First Name: </label><input type="text" id="firstNameSto"><br>
<label>Last Name: </label><input type="text" id="lastNameSto"><br>
<button type="submit" id="fetchDetails">Submit and Display</button>
<div id="displayStorage"></div>

<script>
    document.getElementById('fetchDetails').addEventListener('click',storageFunction);
    function storageFunction(){
        var firstNameSto = document.getElementById('firstNameSto').value;
        var lastNameSto = document.getElementById('lastNameSto').value;
        var storageArr = [];
        var storageObj = {
            firstName: firstNameSto,
            lastName: lastNameSto
        }
        if (localStorage.getItem('storageArrObj') === ""){
            storageArr.push(storageObj);
            var storeObj = JSON.stringify(storageArr);
            localStorage.setItem('storageArrObj', storeObj);
        } else {
            var parseStor = JSON.parse(localStorage.getItem('storageArrObj'));
            storageArr.push(parseStor);
            storageArr.push(storageObj);
            var storeObj = JSON.stringify(storageArr);
            localStorage.setItem('storageArrObj',storeObj);
        }
        console.log(localStorage.getItem('storageArrObj'));

    }
</script>

Answer 1

第一次运行此代码时，localStorage['storageArrObj'] 尚不存在:

1. if (localStorage.getItem('storageArrObj') === ""){ 为 false。
2. JSON.parse(localStorage.getItem('storageArrObj')); 返回 null。
3. 存储在 var parseStor = 中。
4. parseStor 被推送到 storageArr 中:storageArr.push(parseStor);
5. storageArr(其中包含 null)存储在 localStorage 中。

解决方案？

替换:

if (localStorage.getItem('storageArrObj') === ""){

与:

if (localStorage.getItem('storageArrObj') === null){

或者:

var stored = localStorage.getItem('storageArrObj');
if (stored === null || stored === ""){