JS/HTML中如何正确将myInput的值存入sessionStorage？

嘿，我看你遇到了用sessionStorage存myInput元素值但拿不到有效内容的问题，这其实是前端开发里挺常见的小坑，我帮你梳理下原因和解决办法：

最常见的问题：DOM加载时机不对 #

如果你的脚本在页面元素还没渲染完成时就执行，document.getElementById("myInput")会返回null——这时候访问.value要么直接报错，要么存进去的是undefined，自然取不到有效内容。

解决办法：确保DOM加载完成后再操作 #

有两种简单的方式：

1. 把脚本放在页面底部：也就是</body>标签的前面，这样当脚本执行时，页面上的元素已经都渲染好了。
2. 用DOMContentLoaded事件监听：如果脚本必须放在<head>里，就用这个事件来等待DOM加载完成：

document.addEventListener('DOMContentLoaded', function() {
  // 在这里写存值逻辑
  const inputValue = document.getElementById("myInput").value;
  sessionStorage.setItem('userInput', inputValue);
  
  // 测试取值
  const storedValue = sessionStorage.getItem('userInput');
  console.log('存进去的值：', storedValue);
});

其他可能的原因 #

1. 元素ID拼写错误 #

检查你的HTML里，input元素的id是不是真的是myInput——大小写要完全一致哦！比如如果写成myinput（全小写），getElementById就找不到元素，存的值自然无效。

2. 存值时input是空的 #

如果页面一加载就执行存值操作，而用户还没在input里输入内容，那存进去的就是空字符串。你可以绑定一个事件（比如按钮点击、输入框失去焦点）来触发存值，比如：

document.addEventListener('DOMContentLoaded', function() {
  // 绑定按钮点击事件
  document.getElementById('saveBtn').addEventListener('click', function() {
    const inputVal = document.getElementById("myInput").value;
    sessionStorage.setItem('userInput', inputVal);
    alert('内容已存入会话存储！');
  });
  
  // 页面加载时自动填充已存的值
  const savedVal = sessionStorage.getItem('userInput');
  if (savedVal) {
    document.getElementById("myInput").value = savedVal;
  }
});

对应的HTML可以加个按钮：

<input type="text" id="myInput" placeholder="输入内容">
<button id="saveBtn">保存到会话存储</button>

排查小技巧 #

打开浏览器开发者工具（按F12），切换到Application（有些浏览器叫Storage）标签，找到sessionStorage，看看里面的键值对——这样你能直观看到有没有存进去，存的是什么值。要是里面没有对应的键，那大概率是元素没找到或者存值逻辑没执行到。

这样调整后，你应该就能正常存入和获取input的值啦！

内容的提问来源于stack exchange，提问作者Reginald1234