sessionStorage无法返回输入框实际值 仅输出[object HTMLInputElement]如何解决？

问题原因 #

sessionStorage 仅支持存储字符串类型的值。你当前直接把获取到的HTMLInputElement DOM对象存入storage，存储时浏览器会自动调用对象的toString()方法，最终存入的值就是[object HTMLInputElement]，所以取出后自然无法得到输入框的实际输入值。

解决方法 #

存储时不要直接存DOM对象，改为读取输入框的value属性存入即可。

修正后代码 #

let us = document.getElementById('us')
// 存储输入框的实际值，而非DOM对象本身
sessionStorage.setItem("user", us.value)
setTimeout(function() {
  let h = sessionStorage.getItem("user")
  console.log(h)
}, 200);

额外说明 #

如果后续需要存储对象、数组等非字符串类型的数据，需要先通过JSON.stringify()转为JSON字符串再存入，取出时再用JSON.parse()转回原类型即可，示例如下：

// 存储非字符串类型数据示例
const userData = {
  username: 'test',
  age: 18
}
// 转字符串后存入
sessionStorage.setItem('userData', JSON.stringify(userData))
// 取出后转回对象
const savedData = JSON.parse(sessionStorage.getItem('userData'))

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