如何将文本框的值设置为 LocalStorage 中的值

本文档旨在解决如何利用 JavaScript 和 LocalStorage，实现在页面刷新后，文本框内容依然保持不变的问题。通过将文本框的值存储在 LocalStorage 中，并在页面加载时读取 LocalStorage 中的值，可以轻松实现这一功能。本文将提供详细的代码示例和步骤，帮助开发者理解和应用该技术。

使用 LocalStorage 持久化文本框内容

在 Web 开发中，用户输入的数据通常需要在页面刷新后保持不变。LocalStorage 提供了一种简单有效的方式来实现这一需求。以下是如何使用 LocalStorage 来持久化文本框内容的步骤。

1. HTML 结构

首先，我们需要一个包含文本框和保存按钮的 HTML 结构。例如：

  
    
      
8a
    
        Save  

在这个例子中，我们有一个文本框（）和一个保存按钮（<button>）。 文本框的 ID 是 8am-text，保存按钮的 ID 是 8am-btn。</p> <h3>2. JavaScript 代码</h3> <p>接下来，我们需要使用 JavaScript 来实现保存和加载文本框内容的功能。</p> <h4>保存文本框内容</h4> <p>当用户点击保存按钮时，我们将文本框的值存储到 LocalStorage 中。</p> <p> <noscript><img decoding="async" src="https://img.php.cn/upload/webcode/000/000/004/175711680870388.jpg" alt="易森网络企业版"></noscript><img decoding="async" class="j-lazy" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="https://img.php.cn/upload/webcode/000/000/004/175711680870388.jpg" alt="易森网络企业版"> 易森网络企业版 </p> <p>如果您是新用户，请直接将本程序的所有文件上传在任一文件夹下，Rewrite 目录下放置了伪静态规则和筛选器，可将规则添加进IIS，即可正常使用，不用进行任何设置；(可修改图片等)默认的管理员用户名、密码和验证码都是：yeesen系统默认关闭，请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld</p> <p> <noscript><img decoding="async" src="/static/images/card_xiazai.png" alt="易森网络企业版"></noscript><img decoding="async" class="j-lazy" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="/static/images/card_xiazai.png" alt="易森网络企业版"> 0 查看详情 <noscript><img decoding="async" src="/static/images/cardxiayige-3.png" alt="易森网络企业版"></noscript><img decoding="async" class="j-lazy" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="/static/images/cardxiayige-3.png" alt="易森网络企业版"> </p> <pre class="brush:php;toolbar:false;">$('#8am-btn').on('click', function() { var tb8 = $('#8am-text').val(); localStorage.setItem('8am-text', tb8);});</pre> <p>这段代码使用 jQuery 监听 8am-btn 的<span class="wpcom_tag_link"><a href="https://www.chuangxiangniao.com/p/tag/dianjishijian" title="点击事件" target="_blank">点击事件</a></span>。当按钮被点击时，它会获取 8am-text 文本框的值，并使用 localStorage.setItem() 方法将其存储到 LocalStorage 中，键名为 8am-text。</p> <h4>加载文本框内容</h4> <p>在页面加载时，我们需要从 LocalStorage 中读取文本框的值，并将其设置到对应的文本框中。</p> <pre class="brush:php;toolbar:false;">$(document).ready(function() { if (typeof(Storage) !== "undefined") { // 从 LocalStorage 获取值并设置到文本框 $("#8am-text").val(localStorage.getItem("8am-text")); } else { $("#8am-text").val("您的浏览器不支持 LocalStorage."); }});</pre> <p>这段代码在文档加载完成后执行。首先，它检查<span class="wpcom_tag_link"><a href="https://www.chuangxiangniao.com/p/tag/liulanqi" title="浏览器" target="_blank">浏览器</a></span>是否支持 LocalStorage。如果支持，它会使用 localStorage.getItem() 方法从 LocalStorage 中获取 8am-text 键对应的值，并使用 $(“#8am-text”).val() 方法将其设置到文本框中。如果浏览器不支持 LocalStorage，则在文本框中显示一条消息。</p> <h3>3. 完整代码示例</h3> <p>下面是完整的代码示例，包括 HTML 和 JavaScript：</p> <pre class="brush:php;toolbar:false;"> <title>LocalStorage 示例</title> <div class="container"> <div class="row"> <div class="hour"> <p class="time-block col-xl-1 col-lg-1 col-md-2 col-sm-2">8a</p> </div> <textarea class="description col-xl 10 col-lg-10 col-md-8 col-sm-8" id="8am-text"> Save