本地存储（2）
html部分
<!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部分
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(); }) } }
