sessionStorage返回null

Question

我试图实现这段代码但是在我的控制台中它说的是null，这很奇怪，因为当我查看控制台时，sessionStorage不是空的......

$(".btn-alert").click(function(){
        var identifierOfSpan = $(this > "span").text();
        for(var prop in sessionStorage){
            var thing = JSON.parse(sessionStorage.getItem(prop))
            if(thing.id == identifierOfSpan){
                sessionStorage.removeItem(prop);                    
            }
        }
        $(this).closest(".voyages").remove();
        if(sessionStorage.length == 0){
            alert("Message!");
            location.href="reservation.html"

        }
    });

该按钮应该删除div和sessionStorage项，如下所示

Html：

  <div class="voyages">
<button class="btn btn-alert btn-md mr-2" tabindex="-1">delete the flight</button>
<span>ID : 4224762</span>
<div class="infos">
    <img src="img/angleterre.jpg" alt="maroc">
    <div>
        <ul>
            <li><h5>Angleterre, Londres (LON)</h5></li>
            <li><h5>2 adulte(s)</h5></li>
            <li><h5> Aucun enfants </h5></li>
            <li><h5>Type : Couple</h5></li>
        </ul>
    </div>
</div>
<hr>
<h3>Options</h3>
<ul>
    <li>voiture : 0</li>
    <li>Hotel : 0 </li>
</ul>
<hr>
<h3>Prix :3713$</h3>

Answer 1

如果我正确地阅读了您的问题，您想...

1. 点击按钮
2. 找到第一个兄弟<span>元素并从其文本内容中解析一个数字
3. 删除所有匹配sessionStorage属性的id项（JSON序列化对象）

对于ID，我强烈建议您直接向<button>添加一些数据，以帮助您识别正确的记录。如果可以，请尝试类似

的内容

<button class="btn btn-alert btn-md mr-2" data-voyage="4224762"...

尝试这样的事情

$('.btn-alert').on('click', function() {
  const btn = $(this)
  const id = btn.data('voyage')
  // or, if you cannot add the "data-voyage" attribute
  const id = btn.next('span').text().match(/\d+$/)[0]

  // for index-based removal, start at the end and work backwards
  for (let i = sessionStorage.length -1; i >= 0; i--) {
    let key = sessionStorage.key(i)
    let thing = JSON.parse(sessionStorage.getItem(key))
    if (thing.id == id) {
      sessionStorage.removeItem(key)
    }
  }

  // and the rest of your code
  btn.closest(".voyages").remove();
  if(sessionStorage.length === 0) {
    alert("Message!");
    location.href = 'reservation.html'
  }
})

在for..in上使用sessionStorage循环的问题在于，您不仅可以添加任何项目键，还可以

• length
• key
• getItem
• setItem
• removeItem
• clear