Storing Data using sessionStorage in javaScript
Question
What I trying to do is to store the user data as he types on the webpage into session storage. 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:
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)
1 answers
solution1
0 2021-05-20 19:55:33
If the snippet below shows Awaiting Script Result then you should make sure JavaScript is enabled in your browser. Be aware that sessionStorage lasts until the page (with an x ) is closed but localStorage stays until the browser clears its cache.
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 . The keypress is called after the key is pressed, which allows time for the letter to be included the <p></p> .
solution2
-1 2021-05-20 20:03:56
This should be fine, you should use localStorage instead. (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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.