求助：如何将span标签内文本保存至sessionStorage？

问题根源分析 #

1. 第一段代码里用$('.myspanvalue').data()是错误用法，这个方法专门读取元素的data-*属性（比如<span data-id="123">这类），并非获取标签内的文本内容，所以得到空对象{}，存入sessionStorage后就显示为[object Object]。
2. 第二段代码的问题：
   • var valueToStore = myspanvalue;中myspanvalue未定义就直接使用，触发ReferenceError。
   • document.getElementById(".myspanvalue")语法错误，getElementById只接受纯id名，不能加.，且你的span是class而非id，根本匹配不到元素。
3. 最后尝试的document.querySelector('span#myspanvalue')错误使用了id选择器#，但目标span是classmyspanvalue，应该用.来匹配class。

正确实现方式 #

方案1：jQuery版本

$(document).ready(function() {
  $(".mybutton").click(function() {
    // .text()获取纯文本内容，若要保留HTML结构改用.html()
    var valueToStore = $('.myspanvalue').text();
    // sessionStorage仅支持存储字符串，直接存入文本即可
    sessionStorage.setItem("myKey", valueToStore);

    console.log("Value saved to sessionStorage:", valueToStore);
  });
});

方案2：原生JavaScript版本

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.mybutton').addEventListener('click', function() {
    // 匹配class为myspanvalue的span元素
    var spanElement = document.querySelector('span.myspanvalue');
    // textContent获取纯文本，需保留HTML则用innerHTML
    var valueToStore = spanElement.textContent;
    sessionStorage.setItem("myKey", valueToStore);

    console.log("Value saved to sessionStorage:", valueToStore);
  });
});

补充说明 #

只有当你需要存储对象类型的数据时，才需要用JSON.stringify()转为字符串，取出时再用JSON.parse()解析。示例：

// 存储对象
var userInfo = {name: "test", id: 123};
sessionStorage.setItem("userKey", JSON.stringify(userInfo));
// 读取对象
var storedUser = JSON.parse(sessionStorage.getItem("userKey"));

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