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), ]
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)
<!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>