JQ增删改查localStorage实现搜索历史功能
localStorage 的生命周期是永久的。除非用户在浏览器上手动删除 localStorage 信息,否则这些信息将永久存在。
sessionStorage 的生命周期为当前窗口或者标签页。用户一旦关闭了窗口或者标签页,那么通过 sessionStorage 存储的数据也将被清空。
不同浏览器间无法共享 localStorage 或 sessionStorage 中的数据,
相同浏览器的不同页面间可共享相同的 localStorage(页面属于相同域名和端口),
但不同页面或标签间无法共享 sessionStorage 的数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>JQ增删改查localStorage实现搜索历史功能</title> </head> <body> <input type="text" id="keyword" /> <input type="button" value="搜索" id="imgSearch" /> <ul class="history_search"> </ul> <input type="button" value="清除记录" id="spanDelete" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> var referrerPath = "@ViewBag.ReferrerPath"; //这个是获取来源页的相对路径 var localStorageKey = "search_history"; $(document).ready(function() { //搜索时记录搜索关键字 $("#imgSearch").click(function() { var keyword = $("#keyword").val(); setSearchHistory(keyword); location.href = referrerPath + "?keyword=" + keyword; }); //显示搜索记录 showSearchHistory(); //删除搜索记录 $("#spanDelete").click(function() { var r = confirm("确定删除搜索记录?"); if (r == true) { localStorage.removeItem(localStorageKey); $(".history_search").html(""); } else { console.log("您按了取消!") } }); function setSearchHistory(keyword) { var items = getSearchHistory(); if (items.length > 20) { alert("搜索记录太多,请先清空。"); return; } var item = { referrerPath, keyword }; for (var i = 0; i < items.length; i++) { if (items[i].referrerPath === item.referrerPath && items[i].keyword === item.keyword) { return; } } items.push(item); var strItems = JSON.stringify(items); localStorage.setItem(localStorageKey, strItems); } function getSearchHistory() { var strItems = localStorage.getItem(localStorageKey); var items = JSON.parse(strItems); if (items === null) { items = []; } return items; } function showSearchHistory() { var arrProductSearchHistroy = new Array(); $.each(getSearchHistory(), function(i, o) { var url = o.referrerPath + "?keyword=" + o.keyword; var item = "<li><a href=\"" + url + "\">" + o.keyword + "</a></li>"; arrProductSearchHistroy.push(item); }); $(".history_search").html(arrProductSearchHistroy.join("")); } }); </script> </body> </html>
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步