Kde jsou uloženy změny které provádí JS v html souboru?

Ahoj,
jak prosím funguje tohle.
Mám nějaký soubor.html, ten spustím a pomocí JS (který je uvnitř toho souboru index.html) třeba přidávám další položky <li> do <ul>, měním obsah v <input> atd.
Kam se tyto změny ukládají? Proč je nevidím třeba ani v Chrome DevTools a v podobných aplikacích?
Potřeboval bych ten soubor index.html přes prohlížeč stáhnout do PC (jelikož samotný JS ukládat soubory neumí), ale potřebuji ho stáhnout včetně těch provedených změn.

Našel jsem kód, který stáhne celý obsah souboru index.html

<a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="index.html">Download</a>

Bohužel aplikované změny se tímto způsobem neuloží.

Pokud někdo ví, budu velmi rád za rady.

Jsou zobrazeny jen nové odpovědi. Zobrazit všechny

Předmět	Autor	Datum
"Mám nějaký soubor.html, ten spustím a pomocí JS (který je uvnitř toho souboru index.html) třeba při… Mlocik97 20.08.2019 11:09	Mlocik97	20.08.2019 11:09
Díky, mám tři dotazy, ten DOM který se vygeneroval při prvním načtení stránky a) obsahuje úplně cel… pepe51 20.08.2019 11:19	pepe51	20.08.2019 11:19
1. Ano, celé HTML a CSS informace ku každému elementu v DOMe. 2. Ano, devtools 3. Ano, priklad: http… Mlocik97 20.08.2019 11:22	Mlocik97	20.08.2019 11:22
Díky, 2. V devtools to hledám ale fakt to nevidím :( Předpokládám, že mám hledat něco co obsahuje so… pepe51 20.08.2019 11:29	pepe51	20.08.2019 11:29
2. Firefox to má pomenované ako DOM a i DOM zobrazuje priamo, Chrome to má nazvané elements (což je… Mlocik97 20.08.2019 11:31	Mlocik97	20.08.2019 11:31
A poradíš jak vyexportovat celý dom? pepe51 20.08.2019 11:34	pepe51	20.08.2019 11:34
https://stackoverflow.com/questions/48765701/how-can-i-download-the-current-dom-with-html-or-javascr… Mlocik97 20.08.2019 11:38	Mlocik97	20.08.2019 11:38
Díky moc. vytvořil jsem tedy soubor index.html a do něj vložil z odkazu <html> <head> <title>Haha</… pepe51 20.08.2019 12:09	pepe51	20.08.2019 12:09
skuste: console.log(document.documentElement.outerHTML); to som otestoval, malo by fungovať. Mlocik97 20.08.2019 12:22	Mlocik97	20.08.2019 12:22
Ano, to funguje. Teď to tedy mám celý takto <html> <head> </head> <body> <a href="#">Download HTML… pepe51 20.08.2019 12:37	pepe51	20.08.2019 12:37
To spíš takhle: anchor.setAttribute('href', 'data:text/html;charset=UTF-8,<html>' + encodeURICompon… Wikan 20.08.2019 13:00	Wikan	20.08.2019 13:00
Super, už to stahuje, ale pouze k původnímu html přidá na začátek <html> a na konec </html> Změny se… pepe51 20.08.2019 13:18	pepe51	20.08.2019 13:18
Jaké změny? Wikan 20.08.2019 13:19	Wikan	20.08.2019 13:19
Přidal jsem tam <textarea>aaaa</textarea> a po načtení jsem to v prohlížeči změnil na bbbb a stáhnul… pepe51 20.08.2019 13:44	pepe51	20.08.2019 13:44
V tom případě to anchor.setAttribute('href',... musíš zavolat až při kliku na download. Takhle se to… Wikan 20.08.2019 13:53	Wikan	20.08.2019 13:53
Tak že takto? <html><head></head><body> <input id="name" value="aaaa"> <a href="#" onclick="downloa… pepe51 20.08.2019 14:07	pepe51	20.08.2019 14:07
<html><head></head><body> <input id="name" value="aaaa" onChange="setValue(this, value)"> <a href="#… Wikan 20.08.2019 15:45	Wikan	20.08.2019 15:45
Nazdar chlapy, pročítám tohle vlákno a při použití tohoto kódu co tady uvádíte mám problém. Stáhne s… Začátečník-vJS 28.10.2019 11:39	Začátečník-vJS	28.10.2019 11:39
Asi nic. Browsery mají omezení na délku. Můžeš zkusit jiný, nebo jinou verzi, ale to je asi tak vše. Wikan 28.10.2019 11:48	Wikan	28.10.2019 11:48
Díky za nápovědu. Existuje jiná možnost? Ze stránek tiddlywiki.com si stáhnu jeden soubor který fung… Začátečník-vJS 28.10.2019 12:04	Začátečník-vJS	28.10.2019 12:04
jak som psal, pripraviť súbor na servery. Mlocik97 28.10.2019 12:05	Mlocik97	28.10.2019 12:05
Ten soubor funguje bez serveru, přímo ve windows. Začátečník-vJS 28.10.2019 12:13	Začátečník-vJS	28.10.2019 12:13
Nechápete.... Ta webstranka je na servery, ten server pripravy aj ten html subor, ten stiahnete a te… Mlocik97 28.10.2019 12:23	Mlocik97	28.10.2019 12:23
Jeden o voze a druhý o koze. Z toho serveru stáhnu na disk celou tu aplikaci, je to jeden soubor cca… Začátečník-vJS 28.10.2019 12:29	Začátečník-vJS	28.10.2019 12:29
Ano, stáhneš si to ze serveru. Jenže ptal ses na to, jak si to stáhnout i bez serveru. Wikan 28.10.2019 12:31	Wikan	28.10.2019 12:31
1) stáhnu si ze serveru tu aplikaci na disk 2) odpojím internet 3) spustit v prohlížeči tu aplikaci… Začátečník-vJS 28.10.2019 12:35	Začátečník-vJS	28.10.2019 12:35
jo aha, ale to už pak není webstranka ale len dokument. Inak když to stahujete tak mate v zdrojakoch… Mlocik97 28.10.2019 12:51	Mlocik97	28.10.2019 12:51
Jaký je mezi tím rozdíl, webový stránka a dokument? nový Začátečník-vJS 28.10.2019 13:27	Začátečník-vJS	28.10.2019 13:27
Tak jsem to zkusil. 2,5 MB to zvládlo, když jsem tam přidal (nevím přesně kolik, ale rozhodně míň ne… nový Wikan 28.10.2019 12:52	Wikan	28.10.2019 12:52
Zkoušel jsem stáhnout 650MB, v pohodě. poslední Začátečník-vJS 28.10.2019 13:46	Začátečník-vJS	28.10.2019 13:46
Inak toto robiť je prasecina... a ani neviem dôvod prečo by niekto potreboval sťahovať subor zo súbo… nový Mlocik97 28.10.2019 12:57	Mlocik97	28.10.2019 12:57

"Mám nějaký soubor.html, ten spustím a pomocí JS (který je uvnitř toho souboru index.html) třeba přidávám další položky <li> do <ul>, měním obsah v <input> atd.
Kam se tyto změny ukládají?"

Zmeny nikde, avšak pri prvom načítaní HTML sa vygeneruje DOM (Dokument Objekt Model) s ktorým da pak manipuluje a ten mění svůj stav... teda si vždy uchováva len aktuálny stav.

V Chrome Devtools i vo Firefox Devtool je ten aktuální stav možné vidět.

Díky, mám tři dotazy,
ten DOM který se vygeneroval při prvním načtení stránky

a) obsahuje úplně celou html stránku?
b) můžu to někde vidět?
c) jde to stáhnout jako soubor?

1. Ano, celé HTML a CSS informace ku každému elementu v DOMe.
2. Ano, devtools
3. Ano, priklad: https://stackoverflow.com/questions/3286423/is-it-possible-to-use-any-html5-fanciness-to-export-local-storage-to-excel/3293101#3293101
hodnoty vyexportovane do Excel suboru.

Díky,
2. V devtools to hledám ale fakt to nevidím :( Předpokládám, že mám hledat něco co obsahuje solovo DOM
3. A uložit to celý jako html soubor to nejde?

2. Firefox to má pomenované ako DOM a i DOM zobrazuje priamo, Chrome to má nazvané elements (což je iné vyzobrazenie DOMu)
3. jde vyexportovat aj kompletne celý DOM.

A poradíš jak vyexportovat celý dom?

https://stackoverflow.com/questions/48765701/how-can-i-download-the-current-dom-with-html-or-javascript

len namiesto vypísania ho do konzole ho vložíte do odkazu na stiahnutie:

https://diskuse.jakpsatweb.cz/?action=vthread&forum=8&topic=172601 čož je napísané v tomto vlákne už od tazatele že jak. Len to

anchor.setAttribute('href', 'data:text/html;charset=UTF-8,<p>asdf</p>');

vymeníte za

anchor.setAttribute('href', 'data:text/html;charset=UTF-8,"<html>" + document.documentElement + "</html>");

možno vhodnejšie bude ešte ten celý DOM uložiť do konštanty len raz a tú konštantu napísať do atribútu, lebo po vykonaní sa zmení DOM čož vyústi v zmenu i toho čo sa má sťahovať. (Záleží samozrejme jak je to napsané, ak je to vo funkcii, ktorá sa zavolá len raz, tak vtedy netreba)

Díky moc.
vytvořil jsem tedy soubor index.html a do něj vložil z odkazu

<html>
<head>
    <title>Haha</title>
    <script>
        function test(){console.log("<html>" + document.documentElement + "</html>")}
    </script>
</head>
<body onload="test()">
    <div><p>Hi!</p></div>
</body>
</html>

Spustil soubor a v prohlížeči zobrazil konzoli.
Předpokládám, že bych měl v konzoli vidět přesně tohle

<html>
<head>
    <title>Haha</title>
    <script>
        function test(){console.log("<html>" + document.documentElement + "</html>")}
    </script>
</head>
<body onload="test()">
    <div><p>Hi!</p></div>
</body>
</html>

ale vidím tam jen

<html>[object HTMLHtmlElement]</html>

Díky

skuste:

console.log(document.documentElement.outerHTML);

to som otestoval, malo by fungovať.

Ano, to funguje.

Teď to tedy mám celý takto

<html>
<head>
</head>
<body>
<a href="#">Download HTML</a>
<script>
var anchor = document.querySelector('a');
anchor.setAttribute('download', 'index.html');
anchor.setAttribute('href', 'data:text/html;charset=UTF-8',"<html>" + document.documentElement + "</html>");
</script>
</body>
</html>

A pokud kliknu na odkaz Download, tak ve správci stahování (Chrome) mi to u toho "staženého" (žádný soubor se nestáhne) souboru píše Chyba - Chyba sítě Jinak to nepíše nikde žádnou chybu.

PS: zkouším to tedy jen přimo ve Windows 10, nemám to na serveru.

To spíš takhle:

anchor.setAttribute('href', 'data:text/html;charset=UTF-8,<html>' + encodeURIComponent(document.documentElement.outerHTML) + '</html>');

Super, už to stahuje, ale pouze k původnímu html přidá na začátek <html> a na konec </html> Změny se stejně neuloží.

Jaké změny?

Přidal jsem tam <textarea>aaaa</textarea> a po načtení jsem to v prohlížeči změnil na bbbb a stáhnul index.html. Čekal jsem, že tam bude <textarea>bbbb</textarea>.
Ale zkoušel jsem taky pomocí JS přidat do seznamu další položky - které vidím už i devtools ale taky se to neuloží.

V tom případě to anchor.setAttribute('href',... musíš zavolat až při kliku na download. Takhle se to zavolá hned při načtení stránky a pozdější změny tam samozřejmě nejsou.

Tak že takto?

<html><head></head><body>
<input id="name" value="aaaa">
<a href="#" onclick="downloadHTML()">Download HTML</a>
<script>
function downloadHTML (){
    var anchor = document.querySelector('a');
    anchor.setAttribute('href', 'data:text/html;charset=UTF-8,' + encodeURIComponent(document.documentElement.outerHTML));
    anchor.setAttribute('download', 'index.html');
}
</script></body></html>

<html><head></head><body>
<input id="name" value="aaaa" onChange="setValue(this, value)">
<a href="#" onclick="downloadHTML()">Download HTML</a>
<script>
function downloadHTML() {
    var anchor = document.querySelector('a');
    anchor.setAttribute('href', 'data:text/html;charset=UTF-8,' + encodeURIComponent(document.documentElement.outerHTML));
    anchor.setAttribute('download', 'index.html');
}
function setValue(input, value) {
    input.setAttribute('value', value);
}
</script></body></html>

Nazdar chlapy, pročítám tohle vlákno a při použití tohoto kódu co tady uvádíte mám problém. Stáhne soubor s velikostí do 3.0MB. Soubor s velikostí větší než 3.1MB se soubor nestáhne / Chyba - Chyba sítě. Nějaké nápady? Jsem začátečník, opravdu nevím?


<a href="#" 
<script>
function downloadHTML() {
    var anchor = document.querySelector('a');
    anchor.setAttribute('href', 'data:text/html;charset=UTF-8,' + encodeURIComponent(document.documentElement.outerHTML));
    anchor.setAttribute('download', 'index.html');
}

Asi nic. Browsery mají omezení na délku. Můžeš zkusit jiný, nebo jinou verzi, ale to je asi tak vše.

Díky za nápovědu. Existuje jiná možnost? Ze stránek tiddlywiki.com si stáhnu jeden soubor který funguje přímo ve win - bez serveru a stáhnu klidně 20MB.

jak som psal, pripraviť súbor na servery.

Ten soubor funguje bez serveru, přímo ve windows.

Nechápete.... Ta webstranka je na servery, ten server pripravy aj ten html subor, ten stiahnete a ten funguje bez servera (rovnako ako ked stiahnete obrazok, dokument, video), ale pripraveny je na servery.

Jeden o voze a druhý o koze. Z toho serveru stáhnu na disk celou tu aplikaci, je to jeden soubor cca 5MB která funguje lokálně - nemá ze serverem nic společného.

Ano, stáhneš si to ze serveru. Jenže ptal ses na to, jak si to stáhnout i bez serveru.

1) stáhnu si ze serveru tu aplikaci na disk
2) odpojím internet
3) spustit v prohlížeči tu aplikaci z disku
4) nasázím tam 20MB textu
5) stisknu tlačítko uložit a soubor se stáhne.
-hotovo-

jo aha, ale to už pak není webstranka ale len dokument. Inak když to stahujete tak mate v zdrojakoch teda ten kód. Proč ho len neskopirujete? Ostatne pri nasadení na localhost ci akykolvek server bude ten limit platiť pre data URI, a bude nutné připravit soubor na servery. Akp dokument to môže fungovať.

Jaký je mezi tím rozdíl, webový stránka a dokument?

Tak jsem to zkusil. 2,5 MB to zvládlo, když jsem tam přidal (nevím přesně kolik, ale rozhodně míň než 20 MB), tak to po kliknutí na uložit nic neudělá.

Zkoušel jsem stáhnout 650MB, v pohodě.

Inak toto robiť je prasecina... a ani neviem dôvod prečo by niekto potreboval sťahovať subor zo súboru. Data je lepšie extrahovat, a nie miliardu krát mať v každom subore stejný kód len so zmenou dat.

Zpět do poradny Odpovědět na původní otázku Nahoru