在 Localstorage 中我的 html 页面上的输入字段中设置值答案

【问题标题】：set the value from an input field on my html page in Localstorage在 Localstorage 中我的 html 页面上的输入字段中设置值
【发布时间】：2018-04-06 19:15:10
【问题描述】：

如何使用 localstorage 从我的 html 页面上的输入字段中设置值。就像我在输入字段中输入一些东西，例如“你好”，然后按下按钮提交。然后页面的标题应更改为“Hello”。但如果可能的话，它需要保存在本地存储中。

<p>Hello</p>

<div class="form-group">
  <label for="text">Change title:</label>
    <input type="text" class="form-control inputBox" id="text" name="text">
</div>

<button>submit</button>

【问题讨论】：

标签： javascript jquery html local-storage

【解决方案1】：

您可以使用localStorage.setItem 和localStorage.getItem 将值保存到localStorage 以获取localStorage 值。这是工作示例。

$(document).ready(function(){
    if(localStorage.getItem("inputvalue")){
      $('p').text(localStorage.getItem("inputvalue"));
    }
    
    $('button').on('click', function() {
    localStorage.setItem("inputvalue", $('#text').val());
    $('p').text(localStorage.getItem("inputvalue"));
});
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello</p>

<div class="form-group">
  <label for="text">Change title:</label>
    <input type="text" class="form-control inputBox" id="text" name="text">
</div>

<button>submit</button>

【讨论】：

这几乎可以工作。当我按 f5 时，文本会变回 Hello。我认为它没有正确保存或者我做错了什么
您需要检查localStorage 是否在onload 事件上具有价值。代码已更新@akin
还是有同样的问题。它确实保存在本地存储中，但刷新页面后它没有显示在我的页面上。每次刷新后它都会变回“你好”
@akin 您收到任何错误吗？以任何方式更新代码检查一次。
成功了！我对“popupp”的事情感到怀疑。但我想也许这就是它应该的方式。将其更改为 ("inputvalue") 使其工作！谢谢你:)

【解决方案2】：

为此，您需要一些 Javascript。

您可以像这样获取输入的值：

var inputValue = document.getElementById("text").value;

然后您可以将其设置到本地存储中。

localStorage.setItem("text", inputValue );

然后您可以使用

从本地存储中检索值

var valueFromStorage = localStorage.getItem("text")

确定您的提交按钮和标题的文本区域：

<button id="submit">submit</button>

<p id="heading-title">

然后获取该按钮的单击事件并执行 DOM 更新。

var submitButton = document.getElementById("submit");

submitButton.addEventListener("click", function(e) {
   document.getElementById("heading-title").innerHTML = valueFromStorage;
})

参考文献

GetElementById

LocalStorage

【讨论】：

好的，但是如何从本地存储设置项目？
@akin 我已经更新了完整的信息，但我建议你先做一些研究。您似乎缺少很多其他基本信息。