基于Cookie的搜索历史提示

Posted on |

背景

在浏览器的地址栏中输入文字，可以看到有个下拉的选择栏，提供一些用户访问的网址。在公司实习参与的项目，前端页面也需要使用该功能，所以开发了一个基于Cookie的搜索历史提示。这里简单介绍一下实现方法。

实现方法

要点

1. Cookie操作

2. 键盘与鼠标交互

3.

看坑

1. 过期的 escape() unescape()

JavaScript 自带了字符串编码和解码的函数,这些函数属于JavaScript 全局对象。

W3school上的Cookie操作方法代码使用了过期的 escape() 和 unescape。(ECMAScript v3 开始过期)

应该使用

encodeURI() / decodeURI()

或者

encodeURIComponent() / decodeURIComponent()

我使用的是：encodeURIComponent() decodeURIComponent()

关于两者的不同，可以查看 stackoverflow上的讨论： Best practice: escape, or encodeURI / encodeURIComponent

2. 在历史记录中，如果含有HTML转义字符，则需要做反转义处理

例如：

HTML 可见看到的一条历史记录

// 用户可见字段     
search a > 100

// 真实的HTML字段
<a id="history">search a &gt; 100</a>

使用 document.getElementById('history').innerHTML 得到的是 search a &gt; 100，而真正的搜索历史是 search a > 100。这时候需要反转义。

其实方法很简单，search a &gt; 100字段在 document.getElementById('history') DOM对象中就存在：

document.getElementById('history').innerHMTL // search a &gt; 100
document.getElementById('history').innerText  // search a > 100
document.getElementById('history').textContent // search a > 100

可以参考HTML反转义方法

惊喜

结语