CODEWITHSUNDEEP
html
lewis4u
lewis4u

Reputation: 15027

Is it possible to edit textarea and save HTML file with changes locally in browser?

I have this crazy idea to have a simple file .html with textareas which can be edited but I don't want to have a database or any backend, just this one file and to be able to open it in browser and in browser add text and save it somehow....is this possible without backend and Database?

This a simple example:

<!DOCTYPE html>

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Test</title>
</head>
<body>

<textarea rows="4" cols="50">
    At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>


</body>
</html>

And what I want is to be able to save the changes made in Textarea to be permanent so when I copy that .htm file those changes should be there in source code of that htm file.

Upvotes: 2

Views: 1111

Answers (3)

domsson
domsson

Reputation: 4691

It looks as if this is possible simply by using a browsers Save page as... (or similarly named) feature, which can usually be easily accessed via CTRL+S.

Try this:

  • Create a very simple .html file that has some element with the contenteditable attribute.
  • Open that file in your browser.
  • Change the contents of the editable element from within the browsers.
  • Hit CTRL+S and save the file over itself.
  • Reload the page or reopen the same file.

The changes you performed from within the browser should be there and should also be reflected in other editors or browsers.

However, as this is a browser feature that is not covered by any standard, some browsers might not offer this feature or save the file in its original, unchanged state. Also, the way browsers handle this can obviously be subject to change.

At the time of writing, this has been successfully tested with these browsers / OS:

  • Chrome 60, Windows
  • Opera 47, Windows
  • Firefox 55, Windows and OSX

Browsers / OS that do not save the changes:

  • Edge 40, Windows (also, opening local files is non-trivial)
  • Chrome 60, OSX
  • Safari Version 10.1.2 (12603.3.8)
  • Opera 47, OSX

Upvotes: 2

Simone
Simone

Reputation: 21262

It is possible to edit an HTML file on the fly using the contenteditable attribute, or simply from your browser's web inspector.

For saving the page you could use localStorage or other mechanisms to save it just on your computer.

It's even possible to create a simple text editor that works in your browser, just by going to this URL: data:text/html,<html contenteditable></html>

You can have a look at this blog post for more: https://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/ (I am the author)

Upvotes: 2

Nirzar
Nirzar

Reputation: 181

In HTML5 you can use local storage to save the data.

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

use the following example in javascript to store and retrieve the data:

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Upvotes: 0

Related Questions