huanggr
搜索框下方保留搜索记录
搜索框下方保留搜索记录这个效果在很多站点的搜索框处用的非常多，搜索的数据使用本地存储来处理，该功能不仅仅提高了界面对用户的友好程度，而且也不需要向服务器去请求接口，不需要带宽，所以非常的实用，接下来给大家分析一下我们需要用到的几个api。
主要用到的api
localStorage.getItem()这个方法是用来获取到的数据的
localStorage.setItem()这个方法是用来设置数据的
localStorage.clear()这个方法是用来清除数据的
JSON.stringify()这个方法是用来将数组数组转换为json字符串的
JSON.parse()这个方法是用来将json字符串转换为数组的
接下来就是完整代码了，您可以在最下方点击链接看到实际的效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>搜索框下方保留搜索记录-国瑞前端</title> <style> *{ margin: 0; padding: 0; } body{ margin-left: 300px; } ul{ list-style: none; } ul li,div{ width: 250px; padding: 10px 0; margin-left: 10px; border-bottom: 1px dashed #ccc; height: 20px; } a{ float: right; } input{ padding: 5px; margin: 10px; } </style> </head> <body> <input type="search" placeholder="输入搜索关键字" /> <input type="button" value="搜索" /> <div><a href="javascript:;">清空搜索记录</a></div> <ul> <li>没有搜索记录</li> <li><span>手机</span><a href="javascript:;">删除</a></li> <li><span>手机</span><a href="javascript:;">删除</a></li> <li><span>手机</span><a href="javascript:;">删除</a></li> <li><span>手机</span><a href="javascript:;">删除</a></li> <li><span>手机</span><a href="javascript:;">删除</a></li> </ul> <script src="jquery.min.js"></script> <script> $(function () { /*1.使用json数据存储搜索历史记录*/ /*2.预设一个key historyList */ /*3.数据格式列表 存的是json格式的数组*/ /*4. [电脑，手机，。。。。]*/ /*1.默认根据历史记录渲染历史列表*/ var historyListJson = localStorage.getItem('historyList') || '[]'; var historyListArr = JSON.parse(historyListJson); /*获取到了数组格式的数据*/ var render = function () { /*$.each(function(i,item){}) for() for in */ /* forEach 遍历函数 只能数组调用 回到函数（所有对应的值，索引）*/ var html = ''; historyListArr.forEach(function (item, i) { html += '<li><span>' + item + '</span><a data-index="' + i + '" href="javascript:;">删除</a></li>'; }); html = html || '<li>没有搜索记录</li>'; $('ul').html(html); } render(); /*2.点击搜索的时候更新历史记录渲染列表*/ $('[type="button"]').on('click', function () { var key = $.trim($('[type=search]').val()); if (!key) { alert('请输入搜索关键字'); return false; } /*追加一条历史*/ historyListArr.push(key); /*保存*/ localStorage.setItem('historyList', JSON.stringify(historyListArr)); /*渲染一次*/ render(); $('[type=search]').val(''); }); /*3.点击删除的时候删除对应的历史记录渲染列表*/ $('ul').on('click', 'a', function () { var index = $(this).data('index'); /*删除*/ historyListArr.splice(index, 1); /*保存*/ localStorage.setItem('historyList', JSON.stringify(historyListArr)); /*渲染一次*/ render(); }); /*4.点击清空的时候清空历史记录渲染列表*/ $('div a').on('click', function () { /*清空*/ historyListArr = []; /*慎用 清空网上的所有本地存储*/ //localStorage.clear(); //localStorage.removeItem('historyList'); localStorage.setItem('historyList', ''); render(); }); }); </script> </body> </html> |
![前端[yarnpkg/yarn] There appears to be trouble with your network connection.](https://www.huanggr.cn/wp-content/themes/menhu-1/thumb.php?src=https://www.huanggr.cn/wp-content/uploads/2020/04/74115b4a8959fd3375a087dc7690f4d3.png&w=300&h=180)
为什么运行代码出现的和掩饰洁面不一样呢？
为什么运行代码出现的和演示界面不一样呢？
https://www.huanggr.cn/works/1306/index.html，请查看该网址内容，怎么不一样了呢
你好，我查看内容是可以运行的，但是下载代码以后却不能运行，不知道是什么原因，之前的qq添加没注意，不好意思
https://www.huanggr.cn/works/1306/index.html，请查看该网址内容，怎么不一样了呢，已加QQ
网站被攻击了，有些源码文件损坏了