Javascript 如何在不丢失任何插入（div）数据的情况下重新加载页面_Javascript_Html_Ajax

Javascript 如何在不丢失任何插入（div）数据的情况下重新加载页面

javascript html ajax

Javascript 如何在不丢失任何插入（div）数据的情况下重新加载页面,javascript,html,ajax,Javascript,Html,Ajax,我有多个标记，设置为可编辑（contentEditable=“true”）。是否有任何方法在加载前将内容存储在div中，并在重新加载后粘贴相同的内容，或者有任何其他方法可以做到这一点？。我是编程领域的新手 <div contentEditable="true" id="main" key="main" class="main" > <div contentEditable="true" id="div1" onfocusout="myFunction()"><p

我有多个标记，设置为可编辑（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());
    }


样品段
样品段
window.onload=函数（）
{
var a=sessionStorage.getItem（'main'）；
//警报（a）；
document.getElementById（“main”）.value=a；
}
window.onbeforeunload=函数（）{
setItem（“main”，$（“#main”）.val（）；
}

我尝试过这个，但它只适用于具有已知输入字段的表单

我的身体看起来像

   <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>


TeX表示法中的数学
样品段
样品段

您可以将任何数据保存到会话存储中，并在以后与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);
}

您可以将任何数据保存到会话存储中，并在以后与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);
}

我一起破解了它，它对我有效（使用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>


文件
函数storeUserMemo（id）{
让memo=document.getElementById（“memo”）.innerHTML；
setItem（“userMemo”，memo）；
}
函数getUserMemo（）{
让备忘录；
if（localStorage.getItem（“userMemo”））{
memo=localStorage.getItem（“userMemo”）；
}否则{
memo=“请在这里写点东西！”；
}
document.getElementById（“memo”）.innerHTML=memo；
}
函数clearLocal（）{
localStorage.clear（）；
document.getElementById（“memo”）.innerHTML=“请在这里写点东西！”；
}
getUserMemo（）；
let memo=document.getElementById（“memo”）；
memo.addEventListener（“输入”，函数（）{
console.log（“Werändert hier sein Memo？”）
});

无论你在那里放了什么，现在都能在重新加载页面时幸存下来。

我把它拼凑在一起，它对我有用（使用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>


文件
函数storeUserMemo（id）{
让memo=document.getElementById（“memo”）.innerHTML；
setItem（“userMemo”，memo）；
}
函数getUserMemo（）{
让备忘录；
if（localStorage.getItem（“userMemo”））{
memo=localStorage.getItem（“userMemo”）；
}否则{
memo=“请在这里写点东西！”；
}
document.getElementById（“memo”）.innerHTML=memo；
}
函数clearLocal（）{
localStorage.clear（）；
document.getElementById（“memo”）.innerHTML=“请在这里写点东西！”；
}
getUserMemo（）；
let memo=document.getElementById（“memo”）；
memo.addEventListener（“输入”，函数（）{
console.log（“Werändert hier sein Memo？”）
});

您在那里输入的任何内容现在都能在重新加载页面后保留下来。

输入此内容后，两个div标记在我的html视图中丢失。我用我的身体html编辑了我的问题。请提出我的建议missed@sam我在WindowOnLoad事件中添加了条件，以检查是否存储了divs内容。在放入此条件后，两个div标记在我的html视图中丢失。我用我的身体html编辑了我的问题。请提出我的建议missed@sam我在windowonload事件中添加了条件，以检查是否存储了divs内容。