Как перезагрузить страницу без потери вставленных (div) данных - PullRequest
0 голосов
/ 23 октября 2019

У меня есть несколько тегов, которые устанавливаются как редактируемые (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>

Ответы [ 2 ]

2 голосов
/ 23 октября 2019

Вы можете сохранить любые данные в хранилище сеанса и использовать их позже с 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);
}
0 голосов
/ 23 октября 2019

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

<code><!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);">
функция 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 = "Пожалуйста, напишите что-нибудь здесь!";} document.getElementById ("memo"). innerHTML = memo;} function clearLocal () {localStorage.clear ();document.getElementById ("memo"). innerHTML = "Пожалуйста, напишите что-нибудь здесь!";} getUserMemo ();let memo = document.getElementById ("memo");memo.addEventListener ("input", function () {console.log ("Wer ändert hier sein Memo?")});

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...