У меня есть несколько тегов, которые установлены как редактируемые (contentEditable = "true"). Есть ли способ сохранить содержимое в div перед загрузкой и вставить его после перезагрузки или любой другой способ сделать это? Я очень новичок в области программирования

<div contentEditable="true" id="main" key="main" class="main" >  
<div contentEditable="true" id="div1" onfocusout="myFunction()"><p>sample para</p></div>
<div contentEditable="true" id="div2" onfocusout="myFunction()"><p>sample para</p></div>
</div >



window.onload = function()
    {
        var a = sessionStorage.getItem('main');
            //alert(a);
            document.getElementById("main").value = a; 
    }

    window.onbeforeunload = function() {
        sessionStorage.setItem("main", $('#main').val());
    }

Я пробовал это, но это только для форм с известным полем ввода

Мое тело HTML выглядит так

   <body>
    <div>Math in TeX notation</div>

 <div contentEditable="true" id="main" key="main" class="main" >  
    <div contentEditable="true" id="div1" onfocusout="myFunction()"><p>sample para</p></div>
    <div contentEditable="true" id="div2" onfocusout="myFunction()"><p>sample para</p></div>
</div>
    </body>
0
Indian 23 Окт 2019 в 14:29

2 ответа

Лучший ответ

Вы можете сохранить любые данные в хранилище сеансов и использовать их позже с JavaScript:

window.onload = function () {
  const content = sessionStorage.getItem('main');
  if (content) {
     document.getElementById("main").innerHTML = content;
  }
}

window.onbeforeunload = function () {
  sessionStorage.setItem("main", document.getElementById("main").innerHTML);
}
2
Konrad Słotwiński 23 Окт 2019 в 11:51

Я взломал это вместе, это работает для меня (используя Firefox), я проверил это:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="memo-pad">
        <pre id="memo" contenteditable="true" onkeyup="storeUserMemo(this.id);"></pre>
    </div>

    <script>

        function storeUserMemo(id) {
            let memo = document.getElementById("memo").innerHTML;
            localStorage.setItem("userMemo", memo);
        }

        function getUserMemo() {
            let memo;
            if (localStorage.getItem("userMemo")) {
                memo = localStorage.getItem("userMemo");
            } else {
                memo = "Please write something here!";
            }
            document.getElementById("memo").innerHTML = memo;
        }

        function clearLocal() {
            localStorage.clear();
            document.getElementById("memo").innerHTML = "Please write something here!";
        }

        getUserMemo();

        let memo = document.getElementById("memo");
        memo.addEventListener("input", function () {
            console.log("Wer ändert hier sein Memo?")
        });


    </script>

</body>

</html>

Все, что вы там поместите, переживет перезагрузку страницы.

0
JohnnyAwesome 23 Окт 2019 в 12:12
58521858