如何将文本区域内容保存在本地存储中

Posted 2023-05-07

【中文标题】如何将文本区域内容保存在本地存储中

【英文标题】：How to save textarea content in localstorage

【发布时间】：2019-08-06 21:31:47

【问题描述】：

当我按下保存在 textarea 中的内容需要保存在 localstorage 中，下次再次打开站点时，localstorage 中的此内容将被放置在 textarea 中。

Full code in code pen

**JS**
//save txtarea input local storage ..
function SaveBtn()
var input_textarea = document.querySelector('#result');
var save_button = document.querySelector('#SaveBtn');

save_button.addEventListener('click', updateOutput);

input_textarea.textContent = localStorage.getItem('content');
input_textarea.value = localStorage.getItem('content');

function updateOutput() 
     Del();
	localStorage.setItem('content', input_textarea.value);
    input_textarea.textContent = input_textarea.value;

当我按下保存时没有任何错误或警告。

我希望该用户下次访问此文本区域中的站点时为 3*3=9。

【问题讨论】：

您似乎没有Del() 函数...并且您尝试在 将项目设置为localStorage 之前调用它。假设这（理论上）连接到您的删除按钮，这无论如何都会删除内容。

这个del()是给按钮功能（删除）的，效果很好的按钮。

@AleksaKovacevic 无法预测项目将在本地存储中保留多长时间，我邀请您阅读此其他 SO 帖子 (***.com/questions/2326943/…)。如果您确实需要为用户保留一个值，直到他们下次访问您正在开发的网站或页面，那么数据库将是放置它的地方。

@RyanWilson 感谢您的帮助

@AleksaKovacevic 很高兴为您提供帮助。

【参考方案1】：

  var editor = document.querySelector("#editor");
      if (window.localStorage["TextEditorData"]) 
            editor.value = window.localStorage["TextEditorData"];
          
      editor.addEventListener("keyup", function() 
      window.localStorage["TextEditorData"] = editor.value;
      );

<textarea id="editor"></textarea> 


   

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。