使用localStorage保存输入框内容,不受刷新影响
您可以使用localStorage来实现这个功能。localStorage是HTML5提供的一种本地存储方式,可以在浏览器关闭后仍然保存数据,不会受到刷新的影响。
以下是一个示例代码:
HTML部分:
<input id='edit_openaikey' placeholder=''>
<button id='saveBtn'>保存</button>
<button id='editBtn'>修改</button>
JavaScript部分:
// 保存数据
document.getElementById('saveBtn').addEventListener('click', function() {
var openaikey = document.getElementById('edit_openaikey').value;
localStorage.setItem('openaikey', openaikey);
alert('保存完成');
});
// 加载数据
window.addEventListener('load', function() {
var openaikey = localStorage.getItem('openaikey');
if (openaikey) {
document.getElementById('edit_openaikey').value = openaikey;
}
});
// 修改数据
document.getElementById('editBtn').addEventListener('click', function() {
localStorage.removeItem('openaikey');
document.getElementById('edit_openaikey').value = '';
});
首先,当用户点击保存按钮时,我们将输入框中的内容存储到localStorage中,并弹出一个提示框告诉用户保存完成。
当页面加载时,我们从localStorage中读取之前保存的openaikey值,并将其放入输入框中。
当用户点击修改按钮时,我们将之前保存的openaikey值从localStorage中删除,并清空输入框中的内容。这样,用户就可以重新输入并保存数据了。
原文地址: https://www.cveoy.top/t/topic/jqiG 著作权归作者所有。请勿转载和采集!