html里input下拉框加载最近输入内容

html里input下拉框加载最近输入内容

input文本框输入记录，并以下拉框的方式展现最近输入的内容。支持模糊查询，支持配置记录数，支持配置倒叙正序。

1.效果展示

• 静态效果
  
• 动态效果

input加载历史输入

2.localstorage讲解

localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。
localStorage 和 sessionStorage 的区别主要是在于其生存期。

2.1 生存期

localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。
sessionStorage的生存期顾名思义，类似于session，只要关闭浏览器（也包括浏览器的标签页），就会被清空。由于sessionStorage的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。

2.2 数据结构

localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。举点例子：把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，"键是唯一的"这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。

2.3 容量限制

目前业界基本上统一为5M，已经比cookies的4K要大很多了，省着点用吧骚年。

2.4 测试是否支持

if(window.localStorage){
   alert("支持");
}else{
   alert("不支持");
}

3.实现input加载历史输入

3.1 body实现

   

       关键字查询:
   
   

   
   

   

   

   搜  索
   清  除
   

3.2 js实现数据记录

//键值对key-value
storage.setItem(strKey, strValue); 

3.3 js实现配置记录数

var configNum=1000;//配置一千条记录

3.4 js配置正序倒序

var configOrder=true;//true为正序，false为倒叙

3.5 js实现模糊查询

//shz  是输入框的值
//txtValue[i]   是保存的记录
if(txtValue[i].indexOf(shz)!=-1){
   //如果存在，在此处记录
}

4.封装JS，多个input调用 效果

html里input下拉框加载最近输入内容

5.源码下载

html里input下拉框加载最近输入内容