jquery之cookie操作關(guān)閉廣告"設(shè)置時間不再提示"的方法

Cookies

定義：讓網(wǎng)站服務(wù)器把少量數(shù)據(jù)儲存到客戶端的硬盤或內(nèi)存，從客戶端的硬盤讀取數(shù)據(jù)的一種技術(shù)；

下載與引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js；下載：http://plugins.jquery.com/cookie/

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
1.添加一個"會話cookie"

$.cookie('the_cookie', 'the_value');

這里沒有指明 cookie有效時間，所創(chuàng)建的cookie有效期默認(rèn)到用戶關(guān)閉瀏覽器為止，所以被稱為 “會話cookie（session cookie）”。

2.創(chuàng)建一個cookie并設(shè)置有效時間為 7天

$.cookie('the_cookie', 'the_value', { expires: 7 });

這里指明了cookie有效時間，所創(chuàng)建的cookie被稱為“持久 cookie （persistent cookie）”。注意單位是：天；

3.創(chuàng)建一個cookie并設(shè)置 cookie的有效路徑

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

在默認(rèn)情況下，只有設(shè)置 cookie的網(wǎng)頁才能讀取該 cookie。如果想讓一個頁面讀取另一個頁面設(shè)置的cookie，必須設(shè)置cookie的路徑。cookie的路徑用于設(shè)置能夠讀取 cookie的頂級目錄。將這個路徑設(shè)置為網(wǎng)站的根目錄，可以讓所有網(wǎng)頁都能互相讀取 cookie （一般不要這樣設(shè)置，防止出現(xiàn)沖突）。

4.讀取cookie

$.cookie('the_cookie');

5.刪除cookie

$.cookie('the_cookie', null);   //通過傳遞null作為cookie的值即可

6.可選參數(shù)

$.cookie('the_cookie','the_value',{
    expires:7, 
    path:'/',
    domain:'jquery.com',
    secure:true
})　

expires：（Number|Date）有效期；設(shè)置一個整數(shù)時，單位是天；也可以設(shè)置一個日期對象作為Cookie的過期日期；
path：（String）創(chuàng)建該Cookie的頁面路徑；
domain：（String）創(chuàng)建該Cookie的頁面域名；
secure：（Booblean）如果設(shè)為true，那么此Cookie的傳輸會要求一個安全協(xié)議，例如：HTTPS；


jquery用cookies實現(xiàn)今日不在提示

html:

<section class="game-btns cd"><a href="javascript:void(0);" class="g-btn btn-quit">離開游戲</a> 
           <p class="not-tips"> 
               <input type="radio" id="hide"> 今日不再提示 </p> 
       </section> 

jquery:

需要導(dǎo)入插件jquery.cookies.js

地址:https://plugins.jquery.com/cookie/  下載對應(yīng)的版本即可

jquery寫法

$(function(){ 
            var now = <?php echo time();?>;//當(dāng)前時間 
            var torrow = <?php echo strtotime(date('Y-m-d',strtotime('+1 day')));?>;//明日凌晨時間 
            expire =  torrow - now;//今日剩余時間(單位:s) 
            var name = '可獲取用戶唯一標(biāo)示' + '_notShow'; 
            if("true" == $.cookie(name)) { 
                $('#pop_more').hide(); 
            } 
            $('.btn-quit').on("click", function hideDialog() { 
                $('#pop_more').hide(); 
                var isCannel = $("#hide")[0].checked; 
                $.cookie(name, isCannel, expire); 
                window.location.href = '跳轉(zhuǎn)地址'; 
            }); 
        })  

很多網(wǎng)站都有“不再顯示對話框”的功能，要實現(xiàn)這個功能就需要保存上次關(guān)閉時用戶是否選中了該選項。我們可以使用jquery-cookie插件來實現(xiàn)。

github地址：https://github.com/js-cookie/js-cookie

這里以一個表單元素示例：

<script src="../jquery.js"></script>
<script src="../js.cookie.js"></script>
<script>
$(function() {

    console.log("notShow " + Cookies.get("notShow"));
    if("true" == Cookies.get("notShow")){
        $("#dialog").hide();
    }
    $("button").on("click", function hideDialog() {
        $("#dialog").hide();
        var isCancel = $("#hide")[0].checked;
        Cookies.set("notShow", isCancel);
        console.log(Cookies.get("notShow"));
    })


})
</script>
<div id="dialog">
    <form>
        <p>一些提示信息</p>
        <p>
            <label for="hide">
                <input type="checkbox" id="hide"> 不再提示
            </label>
        </p>
        <button type="button">知道了</button>
    </form>
</div>

注意：運行該示例需要在服務(wù)器端運行。

效果：

• jquery
• 廣告
• cookie