原生js实现搜索历史记录案例

功能1：将搜索框中的内容保存到本地存储中

思路：从获取本地存储的数据，判断是否有数据

有数据：获取本地存储中的数据，将其转换成真的数组对象，向这个数组对象中添加搜索内容，再将这个数组用JSON.stringify()转换成字符串对象，将这个字符串对象用setItem()保存到本地存储中

没有数据：就定义一个新数组，将搜索栏中的内容用unshift()添加到数组中，再将这个数组用JSON.stringify()转换成字符串对象，将这个字符串对象用setItem()保存到本地存储中

功能2：将本地存储的数据渲染到页面中

思路：将这个功能封装成一个方法，

首先获取本地存储的数据，并且转换成真的数组对象，

遍历这个对象，获取数据，并且用字符拼接模板，将这些数据拼接到li标签中，再在ul中显示；

这个方法要在点击搜索按钮的时候调用一次更新页面数据

功能3：清空页面的历史记录，并且删除本地存储的数据

思路：给清空按钮注册事件，利用removeItem(）来移出本地存储

再重新调用一个渲染页面的函数

功能4,：当点击某个搜索记录的时候，删除这个记录

思路：这里需要用到事件委派，给ul绑定事件监听，要在每个li标签上添加自定义属性，data-index=${i}来保存当前li的索引，后面用e.target.dataset['index']来获取当前事件源的索引

当点击某个所搜记录的时候，要判断点击对象的节点是否是LI,用event.target.nodeName来获取节点名

如果是，就要获取本地存储的数据并且将其转换成真的数组对象，再用splice()删除数组中元素，添加参数e.target.dataset['index']和1,就是删除数组中改索引下的数据

再将删除后的数组转成字符串对象保存到本地存储中，再重新渲染一下页面

 <header><input type="text" id="search"><input type="button" id="btn" value="搜索"></header><main><div><h3>搜索记录</h3><span id="clear">清空</span></div><ul id="searchList"></ul></main>

 * {margin: 0;padding: 0;}ul {list-style: none;}header {padding: 10px;line-height: 36px;margin-bottom: 20px;}header input {height: 36px;outline: none;}header #search {width: 80%;border-radius: 18px;border: 1px solid #ccc;}header #btn {width: 15%;background-color: plum;color: #fff;border-radius: 6px;border: none;}main {padding: 10px;}main>div {display: flex;justify-content: space-between;}ul>li {float: left;padding: 5px;margin: 10px;background-color: #ccc;color: #fff;border-radius: 5px;}

   window.onload = function() {showLog()btn.addEventListener('click', function() {// 获取搜索栏的值let userVal = search.valuelet arr = []// 获取本地存储的内容let localCon = localStorage.getItem('searches')arr = localStorage.getItem('searches') ? arr = JSON.parse(localStorage.getItem('searches')) : []if (userVal) {arr.unshift(userVal)}// 将数组转化成字符串对象,放到本地存储中localStorage.setItem('searches', JSON.stringify(arr))// 渲染数据到网页中showLog()// 清空搜索框search.value = ''})// 清空clear.addEventListener('click', function() {localStorage.removeItem('searches')// localStorage.clear()showLog()// searchList.innerHTML = ''})// 事件委派searchList.addEventListener('click', function(e) {// console.log(e.target.index);if (e.target.nodeName == 'LI') {let datas = JSON.parse(localStorage.getItem('searches'))console.log(e.target.dataset['index']);datas.splice(e.target.dataset['index'], 1)localStorage.setItem('searches', JSON.stringify(datas))showLog()}})// 页面加载的时候将本地存储的内容显示到页面function showLog() {let locals = JSON.parse(localStorage.getItem('searches')) || []let htmllis = ''for (let i = 0; i < locals.length; i++) {htmllis += `<li data-index=${i}>${locals[i]}</li>`}searchList.innerHTML = htmllis}}

原生js实现搜索历史记录案例相关推荐

vuejs 原生JS 拖拽事件案例
原生JS or Vue 事件案例合集(详细) 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 Section 1 单个或多个鼠标拖拽事件的理解提示:写完文章后,目录可以自动生成,如 ...
原生js实现搜索框点击搜索清空历史记录
实现思路 1.点击搜索框:注册点击事件 2.获取用户输入的值 3.将用户输入的值添加到本地存储:1)由于输入不止一个值且后期需要保存相关数据,故一定要存成数组或对象,所以要定义一个空数组2)由于值可能 ...
原生JS学习 DOM （案例）
文章目录 1.JS的DOM是什么? 2.DOM的用处 3.查询DOM对象 3.1 基础查询函数(常见DOM操作) 3.2 查询其他标签 3.3思考:备注:什么是标签?什么是节点? 3.4标签对象操作 ...
原生js编写小米购物车
原生js编写小米购物车案例思路一.将数据渲染到下方ul中 1.遍历数据添加到li标签内二.渲染购物车内容,将ul中li添加到购物车.添加点击事件 1.加入购物车内容1.判断购物车内需不需要添加此 ...
原生JS实现拼图游戏
前面的话练习了10几个原生js小游戏的案例,刚开始是无从下手,而现在有了自己的思路,不再觉得那么的难了.总结起来,还是那句话,"好的代码是时间熬出来的,多练是硬道理!",这篇文章 ...
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
原生JS实现百度搜索功能
今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html><head><meta charset=&q ...
JS模拟京东搜索框案例模拟京东快递单号查询案例
模拟京东搜索框案例 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
原生js 或vue实现60分钟倒计时案例
使用场景类似于订单倒计时,或答题倒计时,代码如下在Vue中封装了如下的方法 data () {return {countdownTxt:'',//要显示的倒计时文案};}, // 定义一个方法方 ...
原生JS仿造华为商城案例-实现了简单页面-两种轮播图思路的实现-动态展示数据
文章目录功能简介项目准备项目说明方案一:源代码 CSS样式 HTML结构 JS逻辑方案二:源代码 CSS样式 HTML结构 JS逻辑功能简介页面展示该项目功能实现: 无限滚动轮播图 j ...

原生js实现搜索历史记录案例

原生js实现搜索历史记录案例相关推荐

最新文章

热门文章