如何在HTML列表项中传递隐藏数据

<ul>
  <li data-id="1">列表项1</li>
  <li data-id="2">列表项2</li>
  <li data-id="3">列表项3</li>
</ul>

$('li').click(function() {
  var id = $(this).data('id');
  console.log(id); // 输出隐藏数据
});

<ul>
  <li>
    <span>列表项1</span>
    <input type="hidden" name="id" value="1">
  </li>
  <li>
    <span>列表项2</span>
    <input type="hidden" name="id" value="2">
  </li>
  <li>
    <span>列表项3</span>
    <input type="hidden" name="id" value="3">
  </li>
</ul>

<ul>
  <li><a href="page.html?id=1">列表项1</a></li>
  <li><a href="page.html?id=2">列表项2</a></li>
  <li><a href="page.html?id=3">列表项3</a></li>
</ul>

var params = new URLSearchParams(window.location.search);
var id = params.get('id');
console.log(id); // 输出隐藏数据