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
PS. Also, if it is possible, can anyone tell me how to change the font and size of text in the textbox.
Thankyou
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.
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.
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>
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
take a look at https://github.com/mdn/to-do-notifications/tree/gh-pages
an example of IndexedDB API.
M.
ASKER
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.
http://ckeditor.com/
https://www.tinymce.com/