AJAX成功后删除localStorage的对象

Question

//编辑

感谢到目前为止的所有帮助。恐怕，我做错了很多，所以我重新构造了整个代码，还重新构造了localStorage Array的“结构”

这是我的完整代码及其背后的意图。我想检查连接性（我使用pingjs.js 的），如果没有连接性，则用户输入将存储在localStorage中。如果可以回访，则可以通过jQuery AJAX上传localStorage中的所有内容，然后从localStorage Array中删除此提交的数据（例如，不删除之后的所有内容）。而且，我想避免重复（基于stnr和pstn 更新已存在的数据），并且还获得类似于唯一ID来索引localStorage Array 的信息。

到目前为止，这是我的代码，除了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

调用import java.util.logging.Logger; import java.util.logging.Level; ... LOGGER.log(Level.WARNING, "testing warning log 1"); LOGGER.log(Level.INFO, "testing info log"); LOGGER.log(Level.WARNING, "testing warning log 2"); 函数传递要删除的数据的密钥。

removeItem