利用缓存 输入相关位置的数据

input输入框记住之前保存的输入值,便于下次输入时校对及查看选择,这是很常见的一个需求。

实现方式有很多种:

方法一:将输入值存入数据库,下次输入前查询出来,显示在输入框下方。优势:数据准确,稳定,持久;缺点:需服务端支持,额外的前后端交互,服务器资源的占用。

方法二:将输入值保存在本地(webstorage、cookie等),下次输入前获取出来,解析显示在输入框下方。优势:无需后端支持,减少请求,纯前端实现;缺点:要评估数据的持久与稳定性,考虑到清除浏览器缓存,更换浏览器等情况。

方法三:基于方法一、二的基础借助于一些组件,避免自己写一些交互逻辑,例如:element-ui中的<el-autocomplete>组件,ant design中的<Autocomplete>组件。

方法四:使用input表单控件autocomplete和name属性的结合实现。优点:代码简单,交互少,使用表单的默认行为。缺点:同方法二的缺点。

猜你喜欢

转载自blog.csdn.net/weixin_60415789/article/details/132133233