search local store

@@ -10,18 +10,20 @@ var $input = $('#search-input input');
 
 
 var $clear = $('#search-input .clear-input');
 var $clear = $('#search-input .clear-input');
 
 
+var $form = $('#search-form');
+
 var $history = $('.history');
 var $history = $('.history');
 
 
-$('#clear-history').bind('tap', function() {
-    $.ajax({
-        type: 'POST',
-        url: '/search/clearHistory',
-        success: function(data) {
-            if (data.code === 200) {
-                $history.html(''); //clear search history items
-            }
-        }
-    });
+var $clearHistory = $('#clear-history');
+
+var writeSearch = require('./write-search');
+
+var ranToken = writeSearch.getRanToken();
+
+$clearHistory.bind('tap', function() {
+    localStorage.removeItem('historys');
+
+    $history.html('');
 });
 });
 
 
 $input.bind('input', function() {
 $input.bind('input', function() {
@@ -34,4 +36,33 @@ $input.bind('input', function() {
 
 
 $clear.bind('tap', function() {
 $clear.bind('tap', function() {
     $input.val('').trigger('input');
     $input.val('').trigger('input');
-});
+});
+
+//初始化历史搜索的内容
+(function() {
+    var html = '',
+        history,
+        historys, i;
+
+    if (localStorage) {
+        historys = localStorage.getItem('historys');
+
+        if (historys && historys.length > 0) {
+            historys = historys.split(ranToken);
+            for (i = 0; i < historys.length; i++) {
+                history = historys[i];
+
+                if (history === '') {
+                    continue;
+                }
+
+                html += '<li><a href="?query=' + history + '">' + history + '</li>';
+            }
+
+            $history.html(html);
+            $clearHistory.removeClass('hide');
+        }
+    }
+}());
+
+writeSearch.bindWirteLocal($form);

+/**
+ * 将搜索结果存localStorage
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/29
+ */
+
+var ranToken = ' ??++ ';
+
+//获取分隔符
+function getRanToken() {
+    return ranToken;
+}
+
+//绑定提交前的存local操作
+function bindWirteLocal($form) {
+    $form.on('submit', function() {
+        var query = this.query.value,
+            historys;
+
+        if (localStorage) {
+            historys = localStorage.getItem('historys');
+
+            historys = historys ? historys : '';
+
+            if (historys.indexOf(ranToken + query + ranToken) > -1) {
+                return;
+            }
+
+            if (historys === '') {
+                query = ranToken + query;
+            }
+
+            historys += query + ranToken;
+
+            localStorage.setItem('historys', historys);
+        }
+    });
+}
+
+exports.getRanToken = getRanToken;
+
+exports.bindWirteLocal = bindWirteLocal;

@@ -13,6 +13,8 @@ var $brandHeader = $('#brand-header'),
 
 
 var filter = require('../plugin/filter');
 var filter = require('../plugin/filter');
 
 
+var writeSearch = require('../index/write-search');
+
 var tip = require('../plugin/tip');
 var tip = require('../plugin/tip');
 var loading = require('../plugin/loading');
 var loading = require('../plugin/loading');
 
 
@@ -210,6 +212,8 @@ lazyLoad($('.lazy'));
 
 
 filter.registerCbFn(search);
 filter.registerCbFn(search);
 
 
+writeSearch.bindWirteLocal($('#search-form'));
+
 //导航栏点击逻辑说明：
 //导航栏点击逻辑说明：
 //1.点击非active项时切换active状态
 //1.点击非active项时切换active状态
 //2.价格和折扣active状态时继续点击切换排序
 //2.价格和折扣active状态时继续点击切换排序

@@ -2,7 +2,7 @@
 <div class="search-page yoho-page">
 <div class="search-page yoho-page">
     {{# search}}
     {{# search}}
         <div id="search-input" class="search-input">
         <div id="search-input" class="search-input">
-            <form action="/product/list/index" method="get">
+            <form id="search-form" action={{url}} method="get">
                 <i class="search-icon iconfont">&#xe60f;</i>
                 <i class="search-icon iconfont">&#xe60f;</i>
                 <input type="text" placeholder="搜索商品" name="query">
                 <input type="text" placeholder="搜索商品" name="query">
                 <i class="clear-input iconfont hide">&#xe626;</i>
                 <i class="clear-input iconfont hide">&#xe626;</i>
@@ -10,7 +10,7 @@
             </form>
             </form>
         </div>
         </div>
         <div class="search-items">
         <div class="search-items">
-            <div class="hot-search">
+            <div class="hot-search hide">
                 <h3>热门搜索</h3>
                 <h3>热门搜索</h3>
                 <ul class="hot clearfix">
                 <ul class="hot clearfix">
                     {{# hot}}
                     {{# hot}}
@@ -22,15 +22,9 @@
             </div>
             </div>
             <div class="history-search">
             <div class="history-search">
                 <h3>历史搜索</h3>
                 <h3>历史搜索</h3>
-                <ul class="history clearfix">
-                    {{# history}}
-                        <li>
-                            <a href={{url}}>{{name}}</a>
-                        </li>
-                    {{/ history}}
-                </ul>
+                <ul class="history clearfix"></ul>
             </div>
             </div>
-            <button id="clear-history" class="clear-history">清空搜索历史</button>
+            <button id="clear-history" class="clear-history hide">清空搜索历史</button>
         </div>
         </div>
     {{/ search}}
     {{/ search}}
 </div>
 </div>

 {{# goodList}}
 {{# goodList}}
     {{# search}}
     {{# search}}
         <div id="search-input" class="search-input">
         <div id="search-input" class="search-input">
-            <form action={{url}} method="get">
+            <form id="search-form" action={{url}} method="get">
                 <i class="search-icon iconfont">&#xe60f;</i>
                 <i class="search-icon iconfont">&#xe60f;</i>
                 <input type="text" value={{default}} name="query">
                 <input type="text" value={{default}} name="query">
                 <i class="clear-input iconfont hide">&#xe61a;</i>
                 <i class="clear-input iconfont hide">&#xe61a;</i>