其他分享
首页 > 其他分享> > JS实现搜索框文字可删除

JS实现搜索框文字可删除

作者：互联网

JS实现搜索框文字可删除

最近在阅读张鑫旭大佬的博客时，想搜索一篇文章，打开搜索框，虎躯一震
在这里插入图片描述

搜索记录中居然有 不可描述 的历史记录！还好周边没有别人，否则就尴尬了。

但是我之前没有在张鑫旭大佬这里搜索这个不可描述的词语，很奇怪。

  1. 我清理了浏览器的缓存和历史记录，但是这个下拉框搜索记录还在。
  2. 查看网络请求，没有相关敏感词语的返回，判断这个应该不是服务器返回的，应该存在本地浏览器中。浏览器存储，主要是 cookie , localStorage, session 中。

在这里插入图片描述
我个人博客的本地记录就存放在 localStorage 中

在这里插入图片描述

  1. 于是，我清空了相关的 cookie 和 localStorage，但是这个搜索记录还在！！！很烦

  2. 我换了一个思路，这个到底存在于张鑫旭域名下，还是浏览器全部都可以获取（那就非常危险了）于是我直接把这个搜索框复制了 DOM 节点，然后本地新建一个 HTML 嵌入，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form method="get" id="searchform" action="/wordpress/">
    <!-- https://www.zhangxinxu.com/wordpress -->
    <label class="hidden" for="s">Search for:</label>
    <div>
      <input type="search" placeholder="百度搜索质量差？试试直接这里搜索" value="" name="s" id="s">
      <input type="submit" id="searchsubmit" data-value="Search" value="搜索">
    </div>
  </form>
</body>
</html>

但是这个搜索记录还在！！！

在这里插入图片描述

证明这个记录可以在不同的域中共用

  1. 我发现，这个搜索框和表单相关，表单会提交到 wordpress 中，那么是否和 wordpress 有关？查阅资料，基本没有太大关系。

在这里插入图片描述

  1. 最后发现，这个在表单的记录中。应该说，凡是填充过表单，浏览器设置了自动保存表单记录（因为项目中使用另一个技术实现保存记录，我刚开始就没有想到这一点）。于是清除了浏览器自动保存的表单信息。

在这里插入图片描述

再打开张鑫旭大佬的页面搜索，就不会出现不可描述的搜索记录了，这次放心了

在这里插入图片描述

参考文档

https://www.zhangxinxu.com/

https://developer.mozilla.org/zh-CN/docs/Web/API/Storage

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cookie

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form

https://blog.csdn.net/weixin_41196185/article/details/80840657

标签：浏览器,删除,记录,表单,搜索,https,张鑫旭,JS
来源： https://blog.csdn.net/weixin_41697143/article/details/121166436