07: jquery.cookie操作cookie

1.1 jquery.cookie常用方法

　　定义：让网站服务器把少量数据储存到客户端的硬盘或内存，从客户端的硬盘读取数据的一种技术

　　1. 添加一个"会话cookie"

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

　　　　说明： 这里没有指明 cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为 “会话cookie（session cookie）”。

　　2.创建一个cookie并设置有效时间为 7天

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

　　3.创建一个cookie并设置 cookie的有效路径

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

　　　　　　1）在默认情况下，只有设置 cookie的网页才能读取该 cookie。

　　　　　　2）如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。

　　　　　　3）cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie

　　4.读取cookie

　　　　　　$.cookie('the_cookie');

　　5.删除cookie

　　　　　　$.cookie('the_cookie', null); //通过传递null作为cookie的值即可

　　6.可选参数

　　　　　　$.cookie('the_cookie','the_value',{
　　　　　　　　expires:7, // 有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
　　　　　　　　path:'/', // （String）创建该Cookie的页面路径；
　　　　　　　　domain:'jquery.com', // （String）创建该Cookie的页面域名；
　　　　　　　　secure:true // 如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；
　　　　　　})　

1.2 在Django项目中，前端设置、获取cookie演示

from app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^index/', views.index),

    url(r'^get_ck/', views.get_ck),

]

urls.py

from django.shortcuts import render,HttpResponse

def index(request):

    return render(request, 'index.html', )

def get_ck(request):

    val = request.COOKIES.get('per_page_count')

    print('get_ck',val)

    return HttpResponse(val)

/app01/views.py

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    {# 选择每页显示多少条的select单选框 #}

    <div>

        <select id="ps" onchange="changePageSize(this)">

            <option value="10">10</option>

            <option value="20">20</option>

            <option value="50">50</option>

            <option value="100">100</option>

        </select>

    </div>

    <script src="/static/jquery-1.12.4.js"></script>

    <script src="/static/jquery.cookie.js"></script>

    <script>

        //当框架加载完成后获取cookie的值，并设置到select中

        $(function(){

           var v = $.cookie('per_page_count');     //前端获取cookie值

            console.log(v);

            $('#ps').val(v);

        });

        function changePageSize(ths){

            //获取select单选框选择的值（10,20,50,100）这些选项

            var v = $(ths).val();

            //使用cookie将v的值传递到后台

            $.cookie('per_page_count',v, { expires: 7 });        //前端设置cookie值

            $.cookie('per_page_count',v, {'path':'/'});       // 将这个路径设置为网站的根目录

        }

    </script>

</body>

</html>

index.html