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>