当前位置:首页 > 开发 > 行业应用 > 正文

使用localStorage实现历史记录搜索功能

发表于: 2016-09-19   作者:qiaolevip   来源:转载   浏览:
摘要: 搜索功能在商品很多的时候尤为重要,那为什么要历史记录呢,是在乎用户的感受,节约用户思路和操作的时候而产生的一项新的功能,那我们就来讨论一些历史记录是怎么实现的? 首先我们来对比一下localStorage和sessionStorage:localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。sessionStorag

搜索功能在商品很多的时候尤为重要,那为什么要历史记录呢,是在乎用户的感受,节约用户思路和操作的时候而产生的一项新的功能,那我们就来讨论一些历史记录是怎么实现的?

 

首先我们来对比一下localStorage和sessionStorage:

localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息

 

由此看来localStorage更加适合我们做历史记录,即使用户关闭浏览器操作,下次进来依旧存在。

 

localStorage的操作也是极其简单的:

// Save data to the current local store
localStorage.setItem("username", "John");

// Access some stored data
alert( "username = " + localStorage.getItem("username"));


// 或者直接对象操作:
localStorage.historyItems = '历史记录';

console.log(localStorage.historyItems) // 历史记录

 

搜索历史记录展现形式:

使用localStorage实现历史记录搜索功能_第1张图片


V1版:

// 当为空的时候设置一个关键字进去,判断如果关键字是否存在,不存在就追加新的关键字
setHistoryItems(keyword) {
    let { historyItems } = localStorage;
    if (historyItems === undefined) {
      localStorage.historyItems = keyword;
    } else {
      const isNotExists = historyItems.split('|').filter((e) => e == keyword).length == 0;
      if (isNotExists) localStorage.historyItems += '|' + keyword;
    }
}

 

 

V2版:

// 判断关键字是否存在,存在就移除添加在首位
setHistoryItems(keyword) {
    let { historyItems } = localStorage;
    if (historyItems === undefined) {
      localStorage.historyItems = keyword;
    } else {
      let historyItems = historyItems.split('|');
      const isExists = historyItems.filter(e => e == keyword).length > 0;
      if (isExists) {
        historyItems = keyword + '|' + historyItems.filter(e => e != keyword).join('|');
      } else {
        historyItems += '|' + keyword;
      }
      localStorage.historyItems = historyItems;
    }
}

 

 

终极版:

// 不管关键字是否存在都移除,新的关键字添加在首位
setHistoryItems(keyword) {
    let { historyItems } = localStorage;
    if (historyItems === undefined) {
      localStorage.historyItems = keyword;
    } else {
      historyItems = keyword + '|' + historyItems.split('|').filter(e => e != keyword).join('|');
      localStorage.historyItems = historyItems;
    }
}

 

再次更正版:解决只有一个关键字历史记录出现空记录

// 过滤一个结果的空记录添加,过滤空搜索
setHistoryItems(keyword) {
    keyword = keyword.trim();
    let { historyItems } = localStorage;
    if (historyItems === undefined) {
      localStorage.historyItems = keyword;
    } else {
      const onlyItem = historyItems.split('|').filter(e => e != keyword);
      if (onlyItem.length > 0) historyItems = keyword + '|' + onlyItem.join('|');
      localStorage.historyItems = historyItems;
    }
  }

 

 

 

清除历史记录关键字:

clearHistory() {
    localStorage.removeItem('historyItems'); 
}

 

 

 

使用localStorage实现历史记录搜索功能

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
一、实现效果如下 1.第一次进入搜索界面 2.点击加号,将文字赋值给EditText,点击搜索进入搜索 3.点
大家应该做这个功能 首先想到的是用AutoCompleteTextView 这个控件非常好用 ,而且代码写起来也是非
同事负责开发的APP有一个搜索功能,并且需要显示搜索的历史记录,我闲暇之余帮她开发了这个功能,现
同事负责开发的APP有一个搜索功能,并且需要显示搜索的历史记录,我闲暇之余帮她开发了这个功能,现
同事负责开发的APP有一个搜索功能,并且需要显示搜索的历史记录,我闲暇之余帮她开发了这个功能,现
目标:在网站中使用XSLTsearch包实现搜索功能 实现的结果: 首先要下载好XSLTsearch包(不下载在线
一、实现效果如下 图01 图02 二、相关代码 1.布局文件 activity_search_pop.xml <?xml version="
Insus.NET在应用开发时,用过很多不同的方法来为ASP.NET实现搜索功能。 写SQL语句在程序里,或写成
搜索介面如下: 程序中需要实现如上的一个搜索功能。 [Option]有两个选项,说明结果需要一个Detail
功能需求如下: ①后端商品搜索会有热搜和联想词库两种类型提供 ②联想词库可以包含热搜和搜索历史
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号