AJAX成功后删除localStorage的对象

Question

// 编辑

感谢到目前为止的所有帮助。恐怕我做错了，所以我重新构建了整个代码，也重新构建了 localStorage 数组的“结构”

这是我的完整代码及其背后的意图。我想检查连接（我使用 pingjs.js），如果没有连接，用户输入将存储在 localStorage 中。如果我们收到 ping 回复，我们会通过 jQuery AJAX 上传 localStorage 中的所有内容，并从 localStorage 数组中删除提交的数据（例如，不是之后的所有内容）。还有一点，我想避免重复（更新已经存在的数据基于 stnr 和 pstn）并获得类似 用于索引 localStorage 数组的唯一 id 之类的东西。

到目前为止，这是我的代码，除了 indizes 和已经存在的 stnr 和 pstn 的更新：

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/pingjs.js"></script>
<script>
    $(document).ready(function() {
        $('#store').click(function() {
            var startnummer = $("#startnummer").val();
            var ergebnis = $("#ergebnis").val();
            var position = $("#position").val();

            var data = [
                {
                    "stnr": startnummer,
                    "rslt": ergebnis,
                    "pstn": position
                }
            ]

            /*  
                So far I use localStorage.length for indexing, but
                I want something for checking of duplicates and update
                them if necessary, based on stnr AND pstn, so if these
                are same, only update rslt
            */
            localStorage.setItem((localStorage.length), JSON.stringify(data));
        });

        //  We got a ping
        ping('https://example.com/').then(function(delta) {
            if(window.localStorage !== undefined) {
                var fields = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: 'xyz.php',
                    data: fields,
                    success: function(html){
                        //  Here I want to delete all the passed data
                        localStorage.removeItem( ??? );

                        //  Output status
                        $('#status').fadeIn(500).delay(5000).fadeOut(500).html(html);
                    }
                });
            } else {
                alert("Storage Failed. Try refreshing");
            }   
        //  We have no ping
        }).catch(function(err) {
            alert('Could not ping remote URL', err);
        });
    });
</script>

存储工作没有问题。所以这里没问题。

Answer 1

看来您可能不完全了解 localStorage API。我建议从 MDN 阅读 localStorage。

第一个问题是您似乎将信息存储在 localStorage 中不正确。本地存储基于密钥。这意味着所有数据都通过密钥存储在本地存储中。例如{"key" : "data"}。

附带说明，本地存储中的数据以字符串形式保存。所以为了read/write数据to/from本地存储你需要stringify/parse它。

要继续您的问题，我的印象是您将整个数组保存在 localStorage 中，然后尝试删除数组中的每个键。如前所述，这不会起作用，原因有几个。首先，您不能使用localStorage.removeItem() 方法来删​​除存储的对象，因为该对象实际上是一个字符串并且没有被解析。其次，即使不保存为字符串，该函数也不会对存储数据进行操作，而是对存储数据的键进行操作。您的代码缺少的（这将有很大帮助）是您首先保存在localStorage 中的方式。因为在这种情况下，您甚至不必调用removeItem() 三次，只需在所有存储在其下的键上调用一次即可。让我举一个我认为可能与您的问题有关的例子：

var data = [
  {
    "id": 1,
    "name" : "Joe"
  },
  {
    "id": 2,
    "name": "Peter"
  }
]

//Setting the data to localStorage under the key "people"
localStorage.setItem("people", data);

// ... inside your ajax function
 ...({

  //Remove whole array of data based on key

  localStorage.removeItem("people");
  
  //All done with removal
  
  //Rest of your code
 })

如果您只想删除 localStorage 中的那些特定键，您要么必须单独保存它们（推荐），要么您必须阅读，每次您想这样做时都解析、编辑、重新保存（不推荐）数据。

Answer 2

调用removeItem 函数传递您要删除的数据的键。

$.ajax({
    type: 'POST',
    url: 'xyz.php',
    data: {
        results: resultobj
    },
    success: function(callback){
        // Delete data from staticLS here
        localStorage.removeItem("tmemberData")
        // Output message of callback status
        $('#status').fadeIn(500).delay(5000).fadeOut(500).html(callback);
    }
});