save a dynamically created <textarea> tag using javascript ONLY
Question
I am creating textarea tags as the user clicks a button. And i want the dynamically created texarea tags to remain as such when we close and open the browser again.
I am able to save the CONTENT of the textarea tag,but there is no point in it when the textarea tag itself doesnt remain after closing the browser.
ok: SO here is the code :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="A" onclick="add()" type="button">ADD</button>
<button id="S" onclick="save()" type="button">SAVE</button>
<button id="E" onclick="edit()" type="button">EDIT</button>
<button id="D" onclick="del('x')" type="button">DELETE</button>
</body>
<script type="text/javascript">
var text_new,x;
var i=0,j,y;
function add()
{
text_new=document.createElement("textarea");/*I WANT TO STORE THESE CREATED TAGS USING LOCAL STORAGE*/
text_new.id="a"+i.toString();
var t = document.createTextNode("");
text_new.appendChild(t);
console.log(text_new.id);
i++;
document.body.appendChild(text_new);
}
document.body.addEventListener("click", activate);
function activate()
{
if(document.activeElement.tagName.toLowerCase() ==="textarea")
{
x = document.activeElement.id;
y=x;
console.log(x);
console.log(typeof x);
}
}
function save()
{
document.getElementById(x).readOnly=true;
console.log(document.getElementById(x).value);
localStorage.y=document.getElementById(x).value;
document.getElementById(x).value=localStorage.y;
}
function edit()
{
document.getElementById(x).readOnly=false;
}
function del()
{
var element = document.getElementById(x);
element.remove();
}
</script>
</html>
3 answers
solution1
0 2017-06-01 07:41:37
Suggest you to try this . Cookies are data, stored in small text files, on your computer.
- When a user visits a web page, his name can be stored in a cookie.
- Next time the user visits the page, the cookie "remembers" his name.
solution2
0 2017-06-01 07:46:09
You can use html5 web storage, specifically the localStorage.
https://www.w3schools.com/html/html5_webstorage.asp
I hope this Helps!
solution3
0
ok i got it....
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body
{
box-sizing: border-box;
background-image: url(images/note2.jpg);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
body, html {
height: 100%;
margin: 0;
}
button {
display: inline-block;
width: 150px;
background: black;
margin: 0 10px 0 0;
color: white;
font-size: 25px;
font-family: Oswald, Helvetica, Arial, sans-serif;
line-height: 1.8;
appearance: none;
box-shadow: none;
text-align: center;
border-radius: 20px;
border : 6px solid black;
}
#D:hover
{
background: red;
}
#S:hover
{
background: green;
}
button:hover
{
background-color: #417cb8
}
button:active
{
background-color: #417cb8;
box-shadow: 0 5px #27496d;
transform: translateY(5px);
}
textarea
{
height: 170px;
width: 500px;
border: 3px solid black;
border-radius: 20px;
resize: none;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 20px;
padding: 10px;
letter-spacing: 2px;
opacity: 0.6;
text-overflow: auto;
}
#header
{
height: 100px;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 40px;
text-align: center;
padding-top: 30px;
position: relative;
}
#buts
{
position: relative;
margin: 0 auto;
}
#con
{
position: relative;
text-align: center;
padding: 10px;
}
img
{
position: absolute;
height: 60%;
}
</style>
<body>
<div id="header">NOTE IT OR FORGET IT!
<img src="images/note1.png"> </div>
<div id="con">
<div id="buts">
<button id="A" onclick="add()" type="button">ADD</button>
<button id="S" onclick="save()" type="button">SAVE</button>
<button id="E" onclick="edit()" type="button">EDIT</button>
<button id="D" onclick="del('x')" type="button">DELETE</button>
</div>
</div>
</body>
<script type="text/javascript">
var text_new,x;
var i=0,j,y,num=0;
window.onload=function ()
{i=0;
for (var key in localStorage)
{
text_new=document.createElement("textarea");
var t = document.createTextNode(localStorage.getItem(key));
text_new.appendChild(t);
document.body.appendChild(text_new);
text_new.id=key;
i++;
}
}
/*window.onbeforeunload=function()
{
var x=document.querySelectorAll("textarea");
for(num=0;num<x.length;x++)
{
if
}
}
}*/
function add()
{
text_new=document.createElement("textarea");
text_new.id="a"+i.toString();
for(var key in localStorage)
{
if (text_new.id==key)
{
i++;
text_new.id="a"+i.toString();
}
}
var t = document.createTextNode("");
text_new.appendChild(t);
console.log(text_new.id);
i++;
document.body.appendChild(text_new);
}
document.body.addEventListener("click", activate);
function activate()
{
if(document.activeElement.tagName.toLowerCase() ==="textarea")
{
x = document.activeElement.id;
console.log(x);
}
}
function save()
{
if((document.getElementById(x).readOnly==false)&&(document.getElementById(x).value!=""))
{
document.getElementById(x).readOnly=true;
console.log(x);
console.log(document.getElementById(x).value);
localStorage.setItem(x,document.getElementById(x).value);
document.getElementById(x).value=localStorage.getItem(x);
}
}
function edit()
{
document.getElementById(x).readOnly=false;
}
function del()
{
var element = document.getElementById(x);
localStorage.removeItem(x);
element.remove();
}
</script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to load tinyMCE by javascript for dynamically created textarea
How to save html form created dynamically using javascript
how to save dynamically created elements to json using Javascript?
Passing the values from dynamically created textboxes to an array using JavaScript only
ClickListner on Dynamically Created TextArea
Dynamically created textarea with no .val()
Name dynamically created textarea
How to fill textarea tag using javascript
Add HTML element - textarea dynamically using Javascript
How do i get the text of a dynamically created label , when i click from anchor tag using javascript
Related Tags