Question

如何使用localstorage在html页面上的输入字段中设置值。就像我在输入字段中键入内容，例如“Hello”，然后按下按钮Submit。然后页面中的标题应更改为“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以获取localStorage值。这是工作示例。

＆＃13;

$(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"));
});
    
});

＆＃13;

<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>

＆＃13;

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

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

2 个答案:

参考