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>

一辈子很短，努力的做好两件事就好；第一件事是热爱生活，好好的去爱身边的人；第二件事是努力学习，在工作中取得不一样的成绩，实现自己的价值，而不是仅仅为了赚钱。

相关阅读:
TensorFlow 简单实例
 $nextTick 宏任务微任务 macrotasks microtasks
FIS3 构建工程化
 axios 请求参数配置说明
 js 垃圾回收机制与内存管理
 Async Await
webpack 生命周期
 高阶函数实现sum(2)(3) 柯里化
 JavaScript和JQuery的区别
 Javascript --常用技巧
原文地址：https://www.cnblogs.com/antao/p/13209195.html