javascript - sessionStorage 返回空

Question

我试图实现这段代码，但在我的控制台中它说 thing is 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项目(JSON 序列化对象)与匹配 id属性

对于 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