javascript - 设置本地存储中 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 来获取 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>