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