搜索历史localstage本地化存储

所属分类:输入-搜索

 24931  296  查看评论 (15)
分享到微信朋友圈
X
搜索历史localstage本地化存储 ie兼容9

更新时间:2019/5/7 上午9:16:56

更新说明:添加点击搜索历史按钮,将当前按钮中的文本同步到输入框中。


更新时间:2018/3/25 下午2:44:22

更新说明:自定义名称 history(搜索历史存储函数)与系统函数名称冲突,修改为search_history,解决冲突问题。


引入本地化存储函数mystorage,存储localstorage时候最好是封装一个自己的键值,在这个值里存储自己的内容对象,封装一个方法针对自己对象进行操作。避免冲突也会在开发中更方便。

使用:

console.log(mystorage.set('tqtest', 'tqtestcontent')); //存储 
console.log(mystorage.set('aa','123'));//存储 
console.log(mystorage.set('tqtest1','tqtestcontent1'));//存储 
console.log(mystorage.set('tqtest1','newtqtestcontent1'));//修改 
console.log(mystorage.get('tqtest'));//读取 
console.log(mystorage.remove('tqtest'));//删除 
mystorage.clear();//整体清除

存入搜索历史函数中:

 /**
     * [history //搜索历史函数存储]
     * @param  {[type]} value [搜索词]
     * @return {[type]}       [description]
 */
function history(value) {
    var data = mystorage.get("keywords");
    if (!data) {
        var data = []; //定义一个空数组   
    } else if (data.length === 3) {
        //搜索历史数量      
        data.shift(); //删除数组第一个元素有   
    } else {};
    if (value) {
        //判断搜索词是否为空       
        if (data.indexOf(value) < 0) {
            //判断搜索词是否存在数组中          
            data.push(value); //搜索词添加到数组中           
            mystorage.set("keywords", data); //存储到本地化存储中   
        };
    };
}

点击搜索按钮,或回车时触发history()函数,并传入搜索关键词

相关插件-搜索

jQuery记录搜索历史

搜索历史框,可输入填充可永久记录
  搜索
 39242  325

vue表格数据查询

关于vue.js完成的表格查询信息,附带json文件
  搜索
 12971  143

搜索历史localstage本地化存储

使用localstage本地化存储,将搜索历史缓存下来,便于记录显示
  搜索
 24932  296

zySearch搜索框插件

zySearch用户体验超棒的搜索框插件
  搜索
 57529  338

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    邹先生 0
    2021/2/27 13:46:26
    在手机上点击历史记录 没有作用 回复
    邹先生 0
    2021/2/27 10:37:21
    兄弟 你这个css都是网上的 还不能修改? 回复
    lsl1120 0
    2020/4/16 11:59:00
    如果是汉字的话,点击会报错,这个要怎么解决。
        岁月清浅 安之若素0
        2020/4/25 14:11:55
        具体是什么汉字?
    回复
    誉_* 0
    2020/2/23 11:01:57
    这个不支持汉字查询啊
        岁月清浅 安之若素0
        2020/3/13 14:44:33
        这个只是用来记录搜索历史的,没有查询功能的
    回复
    JoviChin 0
    2019/4/12 16:28:17
    非常好用!感谢! 回复
    睿海 0
    2019/3/3 16:11:48
    能添加搜索历史按钮,就是点击按钮不能传到搜索框中
        岁月清浅 安之若素0
        2019/3/10 16:56:28
        没听明白你的意思,能说明白一点吗?
        说破。0
        2019/5/5 15:15:48
        就是,点击搜索历史,能把关键词赋值到文本框,然后执行搜索,这个功能太简单了,自己写一个要不了几分钟
    回复
    潇湘 0
    2019/2/23 9:04:33
    张正 0
    2019/1/8 15:12:30
    王辉 0
    2018/11/28 16:41:29
    是这样能给q皮吗 回复
    wo519504505 0
    2018/7/31 17:25:22
    膜拜一下。
        张正0
        2019/1/8 15:15:16
        哈哈哈
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复