在 javaScript 中使用 sessionStorage 存储数据

Question

What I trying to do is to store the user data as he types on the webpage into session storage.我想做的是将用户在网页上键入时的数据存储到 session 存储中。 So that if the user refreshes the page data will presist.这样如果用户刷新页面数据就会保留。

<!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>

Here is js file:这是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...";
}

The problem is When I run an HTML file it is not displaying anything(not able to figure out why?) And second is when I type something and refreshes the page then it is not displaying the last character(which is very weird)问题是当我运行 HTML 文件时，它没有显示任何内容（无法弄清楚为什么？）其次是当我输入内容并刷新页面时，它没有显示最后一个字符（这很奇怪）

Answer 1

If the snippet below shows Awaiting Script Result then you should make sure JavaScript is enabled in your browser.如果下面的代码段显示Awaiting Script Result ，那么您应该确保在您的浏览器中启用了 JavaScript。 Be aware that sessionStorage lasts until the page (with an x ) is closed but localStorage stays until the browser clears its cache.请注意sessionStorage会持续到页面（带有x ）关闭，但localStorage会一直持续到浏览器清除其缓存。

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

 <div id='support'>Awaiting Script Result</div>

A side note is that your code won't work with keydown , you should use keypress .附注是您的代码不适用于keydown ，您应该使用keypress 。 The keypress is called after the key is pressed, which allows time for the letter to be included the <p></p> . keypress在按键被按下后被调用，这允许将字母包含在<p></p>中。

Answer 2

This should be fine, you should use localStorage instead.这应该没问题，您应该改用 localStorage。 (It wont run here because this is sandboxed). （它不会在这里运行，因为这是沙盒）。 Edit: changed localStorage to sessionStorage, but you should consider using localStorage, because sessionStorage lasts until the X is pressed.编辑：将 localStorage 更改为 sessionStorage，但您应该考虑使用 localStorage，因为 sessionStorage 会持续到按下 X 为止。

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

 <,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> </html>

在 javaScript 中使用 sessionStorage 存储数据

问题描述

1 个解决方案

解决方案1
0 2021-05-20 19:55:33

解决方案2
-1 2021-05-20 20:03:56

在 javaScript 中使用 sessionStorage 存储数据

问题描述

1 个解决方案

解决方案1 0 2021-05-20 19:55:33

解决方案2 -1 2021-05-20 20:03:56

解决方案1
0 2021-05-20 19:55:33

解决方案2
-1 2021-05-20 20:03:56