Fatal编程技术网
  • javascript/
  • 保存一个动态创建的<；textarea>；仅使用javascript标记

保存一个动态创建的<；textarea>；仅使用javascript标记

javascript

保存一个动态创建的<；textarea>；仅使用javascript标记,javascript,local-storage,Javascript,Local Storage,我在用户单击按钮时创建textarea标记。我希望动态创建的texarea标记在我们再次关闭和打开浏览器时保持不变 我可以保存textarea标记的内容，但是当关闭浏览器后textarea标记本身不保留时，这没有意义 好的，下面是代码： <!DOCTYPE html> <html> <head> <title></title> </head> <body> <button id="A" on

我在用户单击按钮时创建textarea标记。我希望动态创建的texarea标记在我们再次关闭和打开浏览器时保持不变

我可以保存textarea标记的内容，但是当关闭浏览器后textarea标记本身不保留时，这没有意义

好的，下面是代码：

    <!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>


添加
拯救
编辑
删除
var text_new，x；
var i=0，j，y；
函数add（）
{
text_new=document.createElement（“textarea”）；/*我想使用本地存储来存储这些创建的标记*/
text_new.id=“a”+i.toString（）；
var t=document.createTextNode（“”）；
文本_new.appendChild（t）；
console.log（text_new.id）；
i++；
document.body.appendChild（text_new）；
}
document.body.addEventListener（“单击”，激活）；
函数激活（）
{
if（document.activeElement.tagName.toLowerCase（）=“textarea”）
{
x=document.activeElement.id；
y=x；
控制台日志（x）；
控制台日志（x型）；
}
}
函数save（）
{
document.getElementById（x）.readOnly=true；
log（document.getElementById（x）.value）；
localStorage.y=document.getElementById（x）.value；
document.getElementById（x）.value=localStorage.y；
}
函数编辑（）
{
document.getElementById（x）.readOnly=false；
}
函数del（）
{
var元素=document.getElementById（x）；
元素。移除（）；
}
建议您尝试一下。 Cookie是存储在计算机上的小文本文件中的数据

  • 当用户访问网页时，他的名字可以存储在cookie中
  • 下次用户访问页面时，cookie会“记住”他的名字

您可以使用html5 web存储，特别是本地存储

我希望这有帮助

好的，我知道了

 <!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>


身体
{
框大小：边框框；
背景图片：url（images/note2.jpg）；
/*全高*/
身高：100%；
/*将图像居中并精确缩放*/
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
背景附件：固定；
}
正文，html{
身高：100%；
保证金：0；
}
钮扣{
显示：内联块；
宽度：150px；
背景：黑色；
裕度：0 10px 0 0；
颜色：白色；
字体大小：25px；
字体系列：Oswald、Helvetica、Arial、无衬线字体；
线高：1.8；
外观：无；
盒影：无；
文本对齐：居中；
边界半径：20px；
边框：6px纯黑；
}
#D:悬停
{
背景：红色；
}
#S:悬停
{
背景：绿色；
}
按钮：悬停
{
背景色：#417cb8
}
按钮：激活
{
背景色：#417cb8；
盒影：0 5px#27496d；
变换：translateY（5px）；
}
文本区
{
高度：170px；
宽度：500px；
边框：3倍纯黑；
边界半径：20px；
调整大小：无；
字体系列：Tahoma、Verdana、Segoe、无衬线；
字体大小：20px；
填充：10px；
字母间距：2px；
不透明度：0.6；
文本溢出：自动；
}
#标题
{
高度：100px；
字体系列：佐治亚，泰晤士报，“泰晤士报新罗马”，衬线；
字体大小：40px；
文本对齐：居中；
填充顶部：30px；
位置：相对位置；
}
#但是
{
位置：相对位置；
保证金：0自动；
}
#骗局
{
位置：相对位置；
文本对齐：居中；
填充：10px；
}
img
{
位置：绝对位置；
身高：60%；
}
记住它，或者忘记它！
添加
拯救
编辑
删除
var text_new，x；
变量i=0，j，y，num=0；
window.onload=函数（）
{i=0；
for（本地存储中的var键）
{
text_new=document.createElement（“textarea”）；
var t=document.createTextNode（localStorage.getItem（key））；
文本_new.appendChild（t）；
document.body.appendChild（text_new）；
text_new.id=键；
i++；
} 
}
/*window.onbeforeunload=函数（）
{
var x=document.querySelectorAll（“textarea”）；

对于（num=0；numOk，那么到目前为止您尝试了什么？您尝试了什么？您使用了什么代码？您尝试过Cookie吗？我不知道使用localstorage保存标记的语法。我没有尝试过Cookie，也不知道如何使用它们。我想保存整个标记，而不仅仅是它的内容，以便动态创建的标记保留下来。您能提供帮助吗？