在 javaScript 中使用 sessionStorage 存儲數據

Question

我想做的是將用戶在網頁上鍵入時的數據存儲到 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 文件時，它沒有顯示任何內容（無法弄清楚為什么？）其次是當我輸入內容並刷新頁面時，它沒有顯示最后一個字符（這很奇怪）

Answer 1

如果下面的代碼段顯示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>中。

Answer 2

這應該沒問題，您應該改用 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>

在 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