![](/img/trans.png)
[英]Creating an array and storing it in sessionStorage with JavaScript?
[英]Storing Data using sessionStorage in javaScript
我想做的是将用户在网页上键入时的数据存储到 session 存储中。 这样如果用户刷新页面数据就会保留。
<!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 文件时,它没有显示任何内容(无法弄清楚为什么?)其次是当我输入内容并刷新页面时,它没有显示最后一个字符(这很奇怪)
如果下面的代码段显示Awaiting Script Result
,那么您应该确保在您的浏览器中启用了 JavaScript。 请注意sessionStorage
会持续到页面(带有x
)关闭,但localStorage
会一直持续到浏览器清除其缓存。
document.querySelector('#support').innerText = 'sessionStorage' in window? 'Supported': 'Not Supported'
<div id='support'>Awaiting Script Result</div>
附注是您的代码不适用于keydown
,您应该使用keypress
。 keypress
在按键被按下后被调用,这允许将字母包含在<p></p>
中。
这应该没问题,您应该改用 localStorage。 (它不会在这里运行,因为这是沙盒)。 编辑:将 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.