本地存儲（2）

時間 2019-11-08

標籤本地存儲简体版

原文原文鏈接

html部分css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>這是個人樂淘移動端搜索頁</title>
    <!-- 1. 添加移動端的視口 -->
    <!-- meta:vp +tab -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 2. 引入站點圖標 -->
    <!-- rel="icon" 就表示加載的是一個站點圖標 -->
    <link rel="icon" href="images/favicon.ico">
    <!-- 1. 引包先引入第三方的包  若是有依賴要先引入依賴再引入不依賴 -->
    <!-- 樣式再head裏面引入 -->
    <!-- 1. 引入字體圖標的樣式文件 -->
    <link rel="stylesheet" href="lib/fontAwesome/css/font-awesome.css">
    <!-- 2. 引入mui的樣式文件 -->
    <link rel="stylesheet" href="lib/mui/css/mui.css">
    <!-- 1. 引入less的時候能夠直接引入 可是rel="stylesheet/less" -->
    <link rel="stylesheet/less" href="less/search.less">
    <!-- 2. 引入less.js編譯器文件 （專門在瀏覽器裏面去臨時編譯less）  less.js須要在less文件後面引入 可是不能放在body後面 由於less.js是須要編譯less來生成css會影響頁面渲染 -->
    <!-- js一般是放在body結束標籤的上面 可是有一些js要放到head裏面（對頁面渲染有影響） -->
    <script src="lib/less/less.js"></script>
</head>

<body>
    <!-- 先把頁面的大結構劃分好
    每一個大塊最外層選擇器儘可能id選擇器  id樣式優先級高 方便覆蓋一些框架的樣式
    能夠更明顯的區分代碼的功能塊 -->
    <!-- 頭部區域 -->
    <header id="header">
        <a href="#" class="fa fa-arrow-left"></a>
        <h4>搜索中心</h4>
    </header>
    <!-- 分類的主體部分 -->
    <main id="main">
        <!-- 搜索表單 -->
        <div class="search-form">
            <form >
                  <input type="search" placeholder="請輸入要搜索的商品" class="search-input">  
                  <button class="mui-btn mui-btn-primary btn-search">搜索</button>
            </form>
        </div>
        <!-- 搜索歷史記錄 -->
        <div class="search-history">
            <div class="history-title mui-clearfix">
                <span class="mui-pull-left">搜索歷史</span>
                <span class="mui-pull-right fa fa-trash clear-history">清空記錄</span>
            </div>
            <!-- 搜索歷史列表 -->
            <div class="history-list">
                <ul>
                    <li><a href="#">鞋</a> <span class="fa fa-close"></span></li>
                    <li><a href="#">鞋</a> <span class="fa fa-close"></span></li>
                    <li><a href="#">鞋</a> <span class="fa fa-close"></span></li>
                    <li><a href="#">鞋</a> <span class="fa fa-close"></span></li>
                    <li><a href="#">鞋</a> <span class="fa fa-close"></span></li>
                </ul>
            </div>
        </div>
    </main>
    <!-- 底部區域 -->
    <footer id="footer">
        <div class="mui-row">
            <!-- .mui-col-xs-3*4>a[href="#"]>span{首頁} -->
            <div class="mui-col-xs-3"><a href="index.html" class="fa fa-home"><span>首頁</span></a></div>
            <div class="mui-col-xs-3"><a href="category.html" class="fa fa-bars"><span>分類</span></a></div>
            <div class="mui-col-xs-3"><a href="cart.html" class="fa fa-shopping-cart"><span>購物車</span></a></div>
            <div class="mui-col-xs-3"><a href="user.html" class="fa fa-user"><span>會員中心</span></a></div>
        </div>
    </footer>
    <!-- 建立歷史記錄列表模板 -->
    <script type="text/html" id="searchHistoryTmp">
        {{each rows as value i}}
        <li><a href="productlist.html?key={{value.search}}">{{value.search}}</a> <span class="fa fa-close" data-id="{{value.id}}"></span></li>
        {{/each}}
    </script>
    <!-- js在body結束標籤的上面引入 -->
    <!-- 3. 引入mui的js文件 -->
    <script src="lib/mui/js/mui.js"></script>
    <!-- 4. 引入zepto的js文件 -->
    <script src="lib/zepto/zepto.min.js"></script>
    <!-- 5. 引入模板引擎的js文件 -->
    <script src="lib/artTemplate/template.js"></script>
    <!-- 6. 引入本身寫的js文件  -->
    <script src="js/search.js"></script>
</body>

</html>

js部分html

var letao;
$(function() {
    letao = new Letao();
    //調用搜索歷史記錄方法
    letao.addHistory();
    // 調用查詢歷史記錄的方法
    letao.queryHistory();
    // 調用刪除歷史記錄方法
    letao.removeHistory();
    // 調用清空記錄的方法
    letao.clearHistory();
});

var Letao = function() {

}

Letao.prototype = {
    /*添加搜索歷史記錄*/
    addHistory: function() {
        // 1. 給搜索按鈕添加點擊事件
        $('.btn-search').on('click', function(e) {
            // 2. 獲取搜索欄輸入的內容
            var search = $('.search-input').val();
            // 3. 定義一個數組用來存儲搜索記錄 先獲取本地存儲看看有沒有值有值就用以前的值 沒值就用空數組
            var searchHistory = localStorage.getItem('searchHistory');
            // 判斷本地存儲的searchHistory是否有值
            if (searchHistory) {
                // 若是有值是一個字符串 要轉成數組  JSON.parse() 把字符串轉成數組
                searchHistory = JSON.parse(searchHistory);
            } else {
                //若是沒有值就爲空數組
                searchHistory = [];
            }
            // 循環遍歷全部的歷史記錄
            for (var i = 0; i < searchHistory.length; i++) {
                // 若是有重複的就直接 return
                if (searchHistory[i].search == search) {
                    return;
                }
            }
            // 定義一個當前搜索立記錄的id 若是本地存儲沒有值  id就默認爲1
            // 若是已經有值 id就爲最後一個記錄的id+1
            var id;
            if (searchHistory.length > 0) {
                id = searchHistory[searchHistory.length - 1].id + 1;
            } else {
                id = 1;
            }
            // 給每一個搜索記錄添加一個id  用來後面方便去刪除 
            var obj = {
                id: id,
                search: search
            };
            // 4. 把當前輸入的內容添加到數組裏面
            searchHistory.push(obj);
            // 5. 把搜索歷史數組存儲到本地存儲中（轉成json格式的字符串）
            searchHistory = JSON.stringify(searchHistory);
            // 6. 調用本地存儲存儲方法存儲當前數組
            localStorage.setItem('searchHistory', searchHistory);
            // 添加記錄完成也要刷新一下列表 調用一下查詢
            letao.queryHistory();
            // 跳轉頁面以前阻止默認的表單提交            
            e.preventDefault();
            // 調轉到商品列表頁面而且跟上key=search
            window.location.href = 'http://localhost:3000/m/productlist.html?key=' + search;
        });
    },
    // 刪除搜索歷史記錄
    removeHistory: function() {
        // 1. 給全部的刪除x註冊點擊事件
        $('.history-list ul').on('click', '.fa-close', function() {
            // 2. 獲取當前要刪除的記錄的id
            var id = $(this).data('id');
            // 3. 獲取全部的本地存儲值
            var searchHistory = localStorage.getItem('searchHistory');
            if (searchHistory) {
                // 若是有值是一個字符串 要轉成數組  JSON.parse() 把字符串轉成數組
                searchHistory = JSON.parse(searchHistory);
            } else {
                //若是沒有值就爲空數組
                searchHistory = [];
            }
            // 4. 循環遍歷數組判斷id和數組中哪個id相等
            for (var i = 0; i < searchHistory.length; i++) {
                if (searchHistory[i].id == id) {
                    // 5. 刪除數組中的這個值 splice(刪除元素的索引,刪幾個)
                    searchHistory.splice(i, 1);
                }
            }
            // 6. 刪除完畢後從新保存到本地存儲裏面
            // 7. 把搜索歷史數組存儲到本地存儲中（轉成json格式的字符串）
            searchHistory = JSON.stringify(searchHistory);
            // 8. 調用本地存儲存儲方法存儲當前數組
            localStorage.setItem('searchHistory', searchHistory);
            // 9. 調用查詢從新渲染列表
            letao.queryHistory();
        });
    },
    // 查詢搜索歷史記錄
    queryHistory: function() {
        // 1. 獲取本地存儲的值
        var searchHistory = localStorage.getItem('searchHistory');
        if (searchHistory) {
            // 若是有值是一個字符串 要轉成數組  JSON.parse() 把字符串轉成數組
            searchHistory = JSON.parse(searchHistory);
        } else {
            //若是沒有值就爲空數組
            searchHistory = [];
        }
        /*2.把獲取到的數組包裝成對象 由於模板引擎只能傳入對象*/
        var obj = {
                rows: searchHistory.reverse()
            }
            // 3. 調用模板引擎生成模板
        var html = template('searchHistoryTmp', obj);
        // 4. 把模板放到歷史記錄列表
        $('.history-list ul').html(html);
    },
    // 清空搜索歷史記錄
    clearHistory: function() {
        // 1. 給清空記錄添加點擊事件
        $('.clear-history').on('click', function() {
            // 2. 給本地存儲searchHistory鍵的值賦值爲空
            localStorage.setItem('searchHistory', '');
            // 3. 從新查詢渲染頁面
            letao.queryHistory();
        })
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。