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

Question

如何使用localstorage在html页面的输入字段中设置值。 就像我在输入字段中输入某些内容（例如“ Hello”）并按下“提交”按钮一样。 然后页面标题将更改为“ 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> 

Answer 1

您可以使用localStorage.setItem和localStorage.getItem将值保存到localStorage.getItem以获取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> 

Answer 2

为此，您将需要一些Javascript。

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

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

然后，您可以将其设置为localStorage。

localStorage.setItem("text", inputValue );

然后，您可以使用以下命令从本地存储中检索值：

var valueFromStorage = localStorage.getItem("text")

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

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

<p id="heading-title">

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

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

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

参考

的getElementById

localStorage的