如何在VSCode中实现网页刷新后输入框内容持久保留

1. 修改HTML给输入框添加唯一ID #

给输入框加上id属性，方便后续JavaScript定位操作：

<form>
    <div class="image float-l">
        <img src="hayvan-removebg-preview (1).png" alt="resim bulunamadı" width="170" height="150"> 
    </div>

    <div class="kutu0 float-l">
        <h2>Kesimi Yapılan Kurban</h2>
    </div>

    <div class="input float-l">
        <input type='text' id="persistentInput">
    </div>
    
    <div class="clear"></div>
    <hr>

<div class="border">

2. 添加JavaScript实现数据存储与读取 #

在页面的</body>标签前插入以下代码，利用浏览器的localStorage实现数据持久化：

const input = document.getElementById('persistentInput');

// 页面加载时，从本地存储读取数据填充输入框
window.addEventListener('load', () => {
    const savedValue = localStorage.getItem('inputValue');
    if (savedValue) {
        input.value = savedValue;
    }
});

// 输入内容时实时保存到本地存储
input.addEventListener('input', () => {
    localStorage.setItem('inputValue', input.value);
});

// 主动清除数据的方法（可选）
// function clearInput() {
//     localStorage.removeItem('inputValue');
//     input.value = '';
// }

原理说明 #

localStorage是浏览器内置的本地存储机制，存储的数据会永久保留在用户浏览器中，除非用户手动清除浏览器缓存或者执行删除操作。这段代码会在页面加载时自动读取之前保存的数据填充输入框，输入过程中实时更新存储内容，实现刷新页面后数据不丢失的效果。

内容的提问来源于stack exchange，提问作者yude19