Javascript 捕获文本区域的值并将其保存到本地存储时遇到问题_Javascript_Local Storage_User Input

Javascript 捕获文本区域的值并将其保存到本地存储时遇到问题

javascript

Javascript 捕获文本区域的值并将其保存到本地存储时遇到问题,javascript,local-storage,user-input,Javascript,Local Storage,User Input,嗨，我只是想知道我的代码是否可以得到一些指针，我正在尝试捕获并保存textarea的输入值。我对JavaScript相当陌生，我一直在绞尽脑汁想弄明白它。我的问题是关于saveEntry（）函数，它不完整，我现在只发布了我的代码，没有造成错误/不必要的影响。任何提示或提示都会很棒，因为我总是出错 function addTextEntry(key, text, isNewEntry) { // Create a textarea element to edit the entry

嗨，我只是想知道我的代码是否可以得到一些指针，我正在尝试捕获并保存textarea的输入值。我对JavaScript相当陌生，我一直在绞尽脑汁想弄明白它。我的问题是关于saveEntry（）函数，它不完整，我现在只发布了我的代码，没有造成错误/不必要的影响。任何提示或提示都会很棒，因为我总是出错

function addTextEntry(key, text, isNewEntry) {
    // Create a textarea element to edit the entry
    var textareaElement = document.createElement("textarea");
    textareaElement.rows = 5;
    textareaElement.placeholder = "(new entry)";

    // Set the textarea's value to the given text (if any)
    textareaElement.value = text;
    // Add a section to the page containing the textarea
    addSection(key, textareaElement);

    // If this is a new entry (added by the user clicking a button)
    // move the focus to the textarea to encourage typing
    if (isNewEntry) {
        textareaElement.focus();
    }

    // Create an event listener to save the entry when it changes
    // (i.e. when the user types into the textarea)
    function saveEntry() {
       
        // Save the text entry:
        // ...get the textarea element's current value
    
        var currentValue = document.getElementById('textarea').value;

        
        // ...make a text item using the value
        
        // ...store the item in local storage using the given key

        localstroage.setItem(key, item);
       
    }

  
// Connect the saveEntry event listener to the textarea element 'change' event
    
    textareaElement.addEventListener("change", saveEntry());
    
}      

function addImageEntry(key, url) {
    // Create a image element
    var imgElement = new Image();
    imgElement.alt = "Photo entry";

    // Load the image
    imgElement.src = url;

    // Add a section to the page containing the image
    addSection(key, imgElement);
}

/**
 * Function to handle Add text button 'click' event
 */
function addEntryClick() {
    // Add an empty text entry, using the current timestamp to make a key
    var key = "diary" + Date.now();
    var text = "";
    var isNewEntry = true;
    addTextEntry(key, text, isNewEntry);

我被告知使用类似于下面代码的东西，但与捕获用户输入文本的数据值（而不是预先创建的数据）不完全相同

function createDemoItems() {
console.log("Adding demonstration items to local storage");

var item, data, key;

// Make a demo text item
data =
    "Friday: We arrived to this wonderful guesthouse after a pleasant journey " +
    "and were made most welcome by the proprietor, Mike. Looking forward to " +
    "exploring the area tomorrow.";
item = makeItem("text", data);

// Make a key using a fixed timestamp
key = "diary" + "1536771000001";

// Store the item in local storage
localStorage.setItem(key, item);

// Make a demo text item
data =
    "Saturday: After a super breakfast, we took advantage of one of the many " +
    "signed walks nearby. For some of the journey this followed the path of a " +
    "stream to a charming village.";
item = makeItem("text", data);

// Make a key using a fixed timestamp
key = "diary" + "1536771000002";

// Store the item in local storage
localStorage.setItem(key, item);

// Make a demo image item
data = window.DUMMY_DATA_URL;
item = makeItem("image", data);

// Make a key using a fixed timestamp
key = "diary" + "1536771000003";

// Store the item in local storage
localStorage.setItem(key, item);

// Make a demo text item
data =
    "Sunday: Following a tip from Mike we drove to a gastropub at the head of " +
    "the valley - a great meal and fabulous views all round.";
item = makeItem("text", data);

// Make a key using a fixed timestamp
key = "diary" + "1536771000004";

// Store the item in local storage
localStorage.setItem(key, item);

}

你做事的方式有很多问题，但你知道：这就是你来这里的原因

您有一个输入错误：
```
localstroage
```
应该是
```
localStorage
```
您创建了一个文本区域，但没有给它一个ID。在
```
saveData
```
函数中，您试图找到它，但您正在按标记名搜索它。无需搜索：您的事件处理程序已将
```
this
```
设置为元素
在事件处理程序中，将函数称为
```
saveData（）
```
。这将立即调用函数，并将其返回值指定为事件处理程序。只需传递函数名

以下是一个概念演示：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Explore local storage</title>
    </head>
    <body>
    <textarea id="txt" placeholder="Enter text and press TAB"></textarea>
    <script>
        "use strict";
    
        
        let txtKey = "someKey"
    
        // Save the data. No need to search for the text area: 
        // the special value 'this' is already set to it.
        function saveEntry() {
            localStorage.setItem(txtKey, this.value);
        }
        
        // Look fr the previous text and if it exists, put it in the textarea
        let storedText = localStorage.getItem(txtKey);
        if (storedText) {
            document.getElementById('txt').value = storedText;
        }
        
        // Now add the event listener. 
        tArea.addEventListener('change', saveEntry);   // Pass just the function name
    
    </script>
    
    </body>
    </html>


探索本地存储
“严格使用”；
让txtKey=“someKey”
//保存数据。无需搜索文本区域：
//特殊值“this”已设置为它。
函数saveEntry（）{
setItem（txtKey，this.value）；
}
//查看上一个文本，如果它存在，请将其放入文本区域
让storedText=localStorage.getItem（txtKey）；
如果（存储文本）{
document.getElementById（'txt'）。value=storedText；
}
//现在添加事件侦听器。
tArea.addEventListener（'change'，saveEntry）；//只传递函数名

此代码对

txtKey

使用硬编码值。您的代码可能需要为密钥生成和跟踪一些值，否则您可能会用稍后的数据覆盖早期的数据。

您非常接近，您只需在此处或那里进行一些调整

作为免责声明，我必须重新创建您的

addSection（）

函数，以使其正常工作。如果你已经有了，你可以放弃我的

当我们创建一个新条目时，为了使其可区分，我已经为它分配了

键的id

。之前，您试图调用

getElemenyById（“textarea”）

，但没有元素具有id

textarea

，这实际上是您创建的textarea元素的

标记名。如果你想了解更多，请阅读


我已更改事件侦听器的设置方式：
textareaElement.addEventListener(
“输入”，
函数（）{saveEntry（）；}，
假的
);

change
和input
之间的区别在于change
只有在您完成更改并在textarea
之外单击时才会触发，而input
将在您每次输入内容时触发。现在你知道了，所以当然，你可以随意改变它，让它表现出你想要的样子
最后，我已经使刚刚创建的项目立即被检索并登录到控制台。这对于测试非常有用，你可以在高兴的时候注释掉这些行
请注意，下面的代码段是可播放的，但由于存在诸多限制，它实际上无法将数据保存到本地存储，因此您无法在此页面上对其进行全面测试

功能添加部分（键、元素）{
element.id=键；
var测试=document.querySelector（“测试”）；
测试。附加子元素（元素）；
}
函数addTextEntry（键、文本、isNewEntry）{
//创建一个事件侦听器，以便在条目更改时保存该条目
//（即，当用户键入文本区域时）
函数saveEntry（）{
//保存文本条目：
//…获取textarea元素的当前值
var currentValue=document.getElementById（key）.value；
//…使用给定的密钥将项目存储在本地存储器中
setItem（key，currentValue）；
//测试我们是否可以检索该项目，并在您满意时进行注释
var item=localStorage.getItem（键）；
控制台日志（项目）；
}
//创建textarea元素以编辑条目
var textareaElement=document.createElement（“textarea”）；
textareaElement.rows=5；
textareaElement.placeholder=“（新条目）”；
//将textarea的值设置为给定的文本（如果有）
textareaElement.value=文本；
//向包含textarea的页面添加一个节
addSection（键，textArea元素）；
//如果这是一个新条目（由用户单击按钮添加）
//将焦点移到文本区域以鼓励键入
if（isNewEntry）{
textareaElement.focus（）；
}
textareaElement.addEventListener(
“输入”，
函数（）{saveEntry（）；}，
假的
);
//将saveEntry事件侦听器连接到textarea元素“change”事件
//textareaElement.addEventListener（“更改”，saveEntry（））；
}
函数addImageEntry（键、url）{
//创建图像元素
var imgEl