JavaScript使用sessionStorage存储可编辑输入时页面无内容、刷新缺字符问题

问题根因与修复方案 #

1. 页面首次加载无内容 #

根因：首次打开页面时，sessionStorage中还没有存储store字段，sessionStorage.getItem('store')会返回null，代码直接将null赋值给可编辑段落的textContent，覆盖了HTML中预设的默认值Riya Sharma，因此页面显示为空。
修复逻辑：读取存储内容后先做非空判断，仅当存储有有效值时再覆盖元素默认内容。

2. 刷新后丢失最后一个输入字符 #

根因：你绑定的是keydown事件，该事件在按键按下的瞬间触发，此时新输入的字符还没有写入到元素的textContent中，代码读取到的是输入前的旧内容，因此最后一次按键输入的字符不会被存入sessionStorage。
修复逻辑：将监听事件替换为input事件，该事件会在元素内容完成变更后触发，能保证读取到的是最新输入的内容。

修正后的JS代码 #

if(typeof Storage !== 'undefined'){
    const element = document.getElementById('name');
    // 读取存储的内容，非空才覆盖默认值
    const savedText = sessionStorage.getItem('store');
    if(savedText) {
        element.textContent = savedText;
    }
    // 监听input事件，内容变更后实时存储
    element.addEventListener("input" , function(){
        sessionStorage.setItem("store", element.textContent);
    });
}else {
    document.getElementById("name").innerHTML = "抱歉，你的浏览器不支持Web Storage特性...";
}

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