在 javaScript 中使用 sessionStorage 存储数据答案

【问题标题】：Storing Data using sessionStorage in javaScript在 javaScript 中使用 sessionStorage 存储数据
【发布时间】：2021-05-21 10:36:32
【问题描述】：

我试图做的是将用户在网页上键入时的数据存储到会话存储中。这样如果用户刷新页面数据就会保持。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p id = 'name' contenteditable="true">Riya Sharma</p>
        
    </div>
</body>
<script src="sessionstorage.js"></script>
</html>

这里是js文件：

if(typeof Storage !== 'undefined'){
    const element = document.getElementById('name');

    element.addEventListener("keydown" , function(event){
        var text = document.getElementById('name').textContent;
        sessionStorage.setItem("store", text);
    });
    document.getElementById('name').textContent = sessionStorage.getItem('store');
}else {
    document.getElementById("name").innerHTML = "Sorry, your browser does not support Web Storage...";
}

问题是当我运行一个 HTML 文件时它没有显示任何东西（无法弄清楚为什么？）第二个是当我输入内容并刷新页面时，它不显示最后一个字符（这很奇怪）

【问题讨论】：

当您说“不显示最后一个单词”时，您的意思是“最后一个字符”吗？这会更有意义，因为您的事件侦听器在处理密钥之前正在运行。

标签： javascript html session-storage

【解决方案1】：

如果下面的 sn-p 显示 Awaiting Script Result，那么您应该确保在您的浏览器中启用了 JavaScript。请注意，sessionStorage 会持续到页面（带有x）关闭，但localStorage 会一直持续到浏览器清除其缓存。

document.querySelector('#support').innerText =
  'sessionStorage' in window ?
    'Supported' :
    'Not Supported'

&lt;div id='support'&gt;Awaiting Script Result&lt;/div&gt;

附注是您的代码不适用于keydown，您应该使用keypress。 keypress 在按下键后被调用，这样就有时间将字母包含在<p></p> 中。

【讨论】：

我也试过按键，但同样的事情发生了，没有显示最后一个字符。
@NitinSaini，确保您不致电event.preventDefault();
不，上面的文件是我目前唯一写的代码