【Web前端】：JavaScript操作Cookie实现“历史搜索”

最新推荐文章于 2024-07-20 21:43:58 发布

xu_chenyang

最新推荐文章于 2024-07-20 21:43:58 发布

阅读量6.4k

点赞数 7

分类专栏： ▶【Web前端】文章标签： cookie javascript web前端历史

本文链接：https://blog.csdn.net/u010924834/article/details/50544284

版权

本文介绍了如何使用JavaScript操作Cookie来实现Web前端的历史搜索功能。通过在搜索结果页加载时保存搜索关键字和链接，当搜索页重新加载时，从Cookie中读取并显示历史记录。讲解了设置、读取和删除Cookie的代码实现。

摘要由CSDN通过智能技术生成

导读

　　其实实现历史搜索这一功能的思路很简单，这里就是总结一下js如何操作cookie。

一睹为快

　　　　　　　　
　　　　　　　　　　　　　　　　　【搜索页】
　　　　　　　　这里写图片描述
　　　　　　　　　　　　　　　　　【搜索结果页】

需求

　　将用户搜索过的关键字保存起来

实现思路

　　用户通过点击热门搜索、历史搜索中的关键字或者是在搜索框输入关键字之后点击搜索按钮都会进入到搜索结果页面。所以，我们的思路是：
　　当搜索结果页面加载完毕时，将关键字和关键字对应的链接地址存起来，当搜索页重新加载时，将保存的记录显示到界面上。

代码

公共js

/**
 * History
 * 用法
 * var his = new History('key');  // 参数标示cookie的键值
 * his.add("标题", "连接 比如 http://www.baidu.com", "其他内容")； 
 * 得到历史数据 返回的是json数据
 * var data = his.getList();  // [{title:"标题", "link": "http://www.baidu.com"}]
 * 
 */
function History(key) {
   
    this.limit = 10;  // 最多10条记录
    this.key = key || 'y_his';  // 键值
    this.jsonData = null;  // 数据缓存
    this.cacheTime = 24;  // 24 小时
    this.path = '/';  // cookie path
}
History.prototype = {
    constructor : History
    ,setCookie: function(name, value, expiresHours, options) {
   
        options = options || {};
        var cookieString = name + '=' + encodeURIComponent(value);
        //判断是否设置过期时间
        if(undefined != expiresHours){
            var date = new Date();
            date.setTime(date.getTime() + expiresHours * 3600 * 1000);
            cookieString = cookieString + '; expires=' + date.toUTCString();
        }

        var other = [
            options.path ? '; path=' + options.path : '',
            options.domain ? '; dom