使用contenteditable元素时localStorage值为null的问题求助
解决contenteditable div内容保存到localStorage的问题
你的问题核心是contenteditable的div没有value属性——它和<input>、<textarea>这类表单控件不一样,你之前用scratchpad.value读取、设置内容都是无效的,存到localStorage的是undefined,读取自然返回null。
直接修改JavaScript代码即可,HTML无需改动:
let scratchpad = document.querySelector("#scratchpad") // 读取localStorage中保存的内容,恢复到div里 const savedNotes = localStorage.getItem("notes") if (savedNotes) { scratchpad.innerHTML = savedNotes } // 监听输入事件,把div内容存入localStorage scratchpad.addEventListener("keyup", () => { localStorage.setItem("notes", scratchpad.innerHTML) })
补充说明:
- 如果你不需要保留换行、加粗这类HTML格式,只想存纯文本,把代码里的
innerHTML换成textContent即可 - 修改完成后输入内容,刷新页面就能看到内容被成功保存
内容的提问来源于stack exchange,提问作者Andrew Govoni
相关产品推荐
相关产品推荐

