开发者问题收集

在 Javascript 中将文本条目保存到本地存储

2019-03-06
5691

我是 Javascript 编程新手,在尝试完成程序时犯了一个错误。我当前的代码是:

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 text within the textarea
    textareaElement.innerText = text;

    // Add a section to the diary containing the textarea
    addSection(key, textareaElement);

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

    // TODO: Q1(c)(iii)
    // TODO: Add an event listener to textareaElement to save the text when 
 it changes
    textareaElement.addEventListener("change", function(event) {
      // TODO: Within the listener function...
      // TODO: ...make an item using the text area value
      item = makeItem(
      "text",
      textareaElement.value
    );
      // TODO: ...store the item in local storage using the given key
       localStorage.setItem(key, item);
       });
}

正如编码注释中提到的,我的目标是制作并存储项目在本地存储中,但这不起作用。我知道这很可能是用户错误,因为未能理解在 (localStorage.setItem) 行中我应该引用什么“键”。如果这是一个愚蠢的错误或不合逻辑,请原谅,我还在学习,所以我不明白我做错了什么。

我的 HTML 代码如下,如果需要,我可以添加其余的 Javascript 代码:

My Erehwon Journal rw9438

<main>
  <section id="text" class="button">
    <button>Add entry</button>
  </section>
  <section id="image" class="button">
    <button>Add photo</button>
    <input type="file" accept="image/*">
  </section>
</main>

2个回答

localStorage 只能将字符串存储为其值。您正在尝试将值设置为对象。

您可以只存储 texarea 中的文本

localStorage.setItem(key, textareaElement.value)

或者,如果您确实想存储对象,则必须将其字符串化

localStorage.setItem(key, JSON.stringify(item))

从 localStorage 检索“item”时,不要忘记 JSON.parse

GifCo
2019-03-06

没什么大不了的,没有错误,这很愚蠢 :)

您现在所指的 key 值是函数中的 key 参数: addTextEntry(key, text, isNewEntry)key 的命名实际上并不重要,但为了确定它存储的内容,您可以尝试在 localStorage.setItem 下方添加 console.log(localStorage) 语句。因此,您可以检查 localStorage 对象中存储的内容,并检查存储值的键。

下面是浏览器控制台的一个示例,其中键为 myKey :

在此处输入图像描述

希望对您有所帮助。

L. Merlo
2019-03-06