sessionStorage返回空

Question

I试图实现这段代码，但是在我的控制台中它说是空的，这很奇怪，因为当我查看控制台时，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