如何使用 jQuery 将 span 标记添加到选定文本并将更改永久保存在本地 html 文件中？

Question

I have created notes in html file locally and intend to use the file only locally in my computer. Let's say i have a code

<p> this is an example text</p>

I want to select the word example in the browser and preferably press a shortcut to change the code as

<p> this is an <span class="highlight">example</span> text</p>

and save this change in the same html file.

Especially, I have no clue on how to approach saving the changes in the same local html file.

Edit: I intend to use this notes only for personal use and will be only locally stored in my computer as a .html file.

Edit2: Can this be achieved using php?

Answer 1

but I have no clue on how to approach saving the changes in the same local html file.

You can't change the source code of your HTML/JS/CSS file from browser. It posses a serious security risk to your application and hence will be prohibited by the browser.

If you want to remember that you have made this change, then save a value in either localstorage or cookie so that your program read this value at startup and make the change in your markup without a user event.

Answer 2

You can't write to the file system using HTML only - you can however use JS to generate an AJAX request to a server side script (ie PHP/Node/etc.) which in turn writes to a file.

You could retrieve most of the contents by accessing document.body.parentNode.innerHTML changes you've made to DOM since loading the page should be reflected here. It's worth noting that this attribute will not include the HTML tag, or the DTD - it will only include the head and body tags so you'll need to be sure to add them in your server side script.