為什么在chrom的console-> application-> localStorage中顯示null

Question

我正在使用下面的代碼， storeArrObj在chrome的localStorage區域中， storeArrObj的實際值之前沒有顯示空值。 這是為什么 ？

完整代碼

<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') === ""){為假。
2. JSON.parse(localStorage.getItem('storageArrObj')); 返回null 。
3. 存儲在var parseStor = 。
4. parseStor被推入storageArr ： storageArr.push(parseStor);
5. 其中存在null storageArr存儲在localStorage 。

解？

更換：

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

帶有：

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

或搭配：

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