javascript - 在 javaScript 中使用 sessionStorage 存储数据
问题描述
我试图做的是将用户在网页上键入时的数据存储到会话存储中。这样如果用户刷新页面数据就会保留。
<!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>
.
推荐阅读
- list - 如何在cmd中连接字符串列表?
- amazon-ec2 - 未找到 certbot-auto renew 命令
- javascript - Vue 粒子不适用于我的项目?
- python - 在不需要 Tensorflow 的情况下使用 Tensorflow Lite Python 绑定?
- php - 当 URL 不是根时,无法使用 Laravel 获取 URL 上的 GET 参数
- java - 将元素添加到单链表中的给定位置(Java)
- css - Angular Material - Mat-Dialog - 改变背景模糊/变暗效果
- html - 如何在css中制作相对于屏幕尺寸的图像?
- javascript - 在jQuery的if条件中使用AND运算符
- javascript - Jest - 在打字稿中模拟一个命名的类导出