如何使用按钮将文本输入保存并显示到本地存储答案

【问题标题】：How do I save and show text input to local storage using a button如何使用按钮将文本输入保存并显示到本地存储
【发布时间】：2021-12-25 23:14:00
【问题描述】：

所以我尝试在用户使用按钮输入文本输入后将其值保存到本地存储。保存后，他们单击另一个按钮以在另一个文本区域中显示本地存储的内容。我已经尝试了所有我能想到的方法。提前致谢。

    <script>
                function add_local(){
                  window.localStorage['display'] = document.getElementById('firstname').value;
                  window.localStorage['display']= document.getElementById('age').value;
                  window.localStorage['display']= document.getElementById('course').value;
                }
                function show_local(){
                  document.getElementById('firstname').value = window.localStorage['display'];
                  document.getElementById('age').value = window.localStorage['display'];
                  document.getElementById('course').value = window.localStorage['display'];
                }
          </script>

<input type="text" id="firstname" /><br /><br /> <label for="age">Age</label><br />
<input type="text" id="age" /><br /><br /> <label for="course">Favorite Course</label><br /> <input type="text" id="course" /><br />
        </div>
        <div class="right">
          <input type="button" value="Add to localStorage" onclick="add_local()" />
          <input type="button" value="Add to sessionStorage" />
          <input type="button" value="Show localStorage" onclick="show_local()"/>
          <input type="button" value="Show sessionStorage" />
        </div>
      </div>
      <div class="display">
        <label for="display">Display</label><br>
        <textarea id="display" name="display" rows="10" ></textarea>
</div>
    </div>
      
  </body>

【问题讨论】：

在您的add_local 中，您将名称添加到 localStorage，然后使用 age 和 course 的值对其进行修改。
@aerial301 我该如何解决这个问题？

标签： javascript html local-storage

【解决方案1】：

试试这个：

   function add_local() {
   const display = {};
   display.firstname = document.getElementById('firstname').value;
   display.age = document.getElementById('age').value;
   display.course = document.getElementById('course').value;

   window.localStorage.setItem('display', JSON.stringify(display));
   

 }

为了表演试试这个：

 function show_local() {

   let _display = JSON.parse(localStorage.getItem("display"));
   document.getElementById('firstname').value = _display.firstname;
   document.getElementById('age').value = _display.age;
   document.getElementById('course').value = _display.course;
   document.getElementById('display').value = Object.values(_display);
  
   }

https://jsfiddle.net/3tj8okxm/

【讨论】：

我假设它保存到本地存储，但它不会将名称、年龄和课程输出到显示文本区域。
要显示数据以显示文本区域试试这个：document.getElementById('display').value = Object.values(_display);

【解决方案2】：

你几乎做对了所有事情。只需将以下 JS 代码替换为您的 js。您刚刚在分配新存储数据时替换了旧存储数据。

   function add_local() {
    window.localStorage['firstname'] = document.getElementById('firstname').value;
    window.localStorage['age'] = document.getElementById('age').value;
    window.localStorage['course'] = document.getElementById('course').value;
}

function show_local() {
    document.getElementById('firstname').value = window.localStorage['firstname'];
    document.getElementById('age').value = window.localStorage['age'];
    document.getElementById('course').value = window.localStorage['course'];
}

【讨论】：

【解决方案3】：

在本地存储中，您可以设置和获取方法

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

喜欢

    localStorage.setItem('myCat', 'Tom');

    const cat = localStorage.getItem('myCat');

使用您保存到 localStorage 的那些方法

【讨论】：