Link to home
Start Free TrialLog in
Avatar of Konrad G
Konrad G

asked on

How to create a textarea which saves text in HTML

Hi. I'm making this personal website and I want to make a 'notes' page where I could store notes like links to webpages etc. The problem is that if I leave the page, or reload it, the contents of the textbox disappear. I'm looking for a way to make the contents of the textbox stay there until I delete them. I looked all over the internet for a solution to my problem but didn't find it. I am using the command: <textarea name="Notes" rows="50" cols="115"></textarea> .

PS. Also, if it is possible, can anyone tell me how to change the font and size of text in the textbox.

Thankyou
Avatar of Big Monty
Big Monty
Flag of United States of America image

.I would use an already built web editor. It'll allow you to enter in data as html (or plain text), different buttons for different pieces of functionality (hyperlink, font styles, font-sizes, etc). Below are a few I've used myself:

http://ckeditor.com/
https://www.tinymce.com/
HTML by itself never saves anything.  You have to use a programming language to do that.  Javascript in the browser can save it to a cookie or a programming like PHP or ASP can save it to a file or a database on the server.
If you don't want to go with a back-end/server storage like PHP/MySQL/SQLite you can
use HTML5 Storage functionality. http://www.w3schools.com/html/html5_webstorage.asp

As for the styling of textarea, you'll have to go with CSS. http://www.w3schools.com/html/html5_webstorage.asp

M.
Avatar of Konrad G
Konrad G

ASKER

I found this HTML and Javascript example on the website  http://www.w3schools.com/html/html5_webstorage.asp:
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

Open in new window

Unfortunately I don't know how to modify the code to make it save text not the amount of clicks as I don't know much about Javascript. Thankyou again for your help.
SOLUTION
Avatar of Big Monty
Big Monty
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
By the way. If you wants to take the localstorage thingy to the next level,
take a look at https://github.com/mdn/to-do-notifications/tree/gh-pages 
an example of IndexedDB API.

M.
Thankyou all for your help. I have modified the code in TrasherDK's reply to suit me better but other than that it's perfect. I also used some CSS I found on a webpage to change the style of the textbox.