对于cookie的操作一般选择在后台处理居多,但是jQuery借助jquery.cookie.js也可以实现对cookie的操作,这样为前端处理一些问题带来了便利。
下面简单介绍一下:
首先,在页面引入必备文件(两个js文件):
//html部分
<script type="text/javascript" src="/public/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/public/js/jquery.cookie.js"></script>
//jQuery部分
//用jQuery操作cookie
//设置cookie值【设置名值对,有效路径,有效期(单位:天)】
$.cookie('good','study20170802',{path:'/',expires:10});
//获取cookie值
console.log($.cookie('good'));
//更新cookie值
$.cookie('good','study007',{path:'/',expires:10});
console.log($.cookie('good'));
//删除cookie【删除方式:把有效期设置为<=0的数字即可】
//注意:你需要与定义此cookie时的有效路径保持一致,才能删除同一个cookie
$.cookie('good','',{path:'/',expires:-1});
console.log($.cookie('good'));
//补充一点:
$.cookie('goodbye','2016');
console.log($.cookie('goodbye'));
//注:当没有指明 cookie有效时间时,所创建的cookie有效期默认到用户关闭浏览器为止。
打印结果:
删除之前:
删除之后:
其实,$.cookie()函数还有更多参数:
$.cookie('名称','值', {expires: 有效时间, path: '有效路径', domain:'限制域名', secure: 是否要求为安全访问});
参数解析:
expires: 7
定义cookie的有效时间,值可以是一个(从创建cookie时算起,以天为单位)或一个Date。
如果省略此参数,那么创建的cookie是会话cookie,将在用户退出浏览器时被删除。
path: ‘/’
默认情况:只有设置cookie的网页才能读取该cookie。
定义cookie的有效路径。默认情况下,该参数的值为创建cookie的网页所在路径(标准浏览器的行为)。
如果你想在整个网站中访问这个cookie需要这样设置有效路径:path: ‘/’。
如果你想删除一个定义了有效路径的cookie,你需要在调用函数时包含这个路径:
$.cookie(‘the_cookie’, null, { path: ‘/’ });。
domain: ‘mytest.com’
默认值:创建cookie的网页所拥有的域名。
secure: true
默认值:false。如果为true,cookie的传输需要使用安全协议(HTTPS)。
raw: true
默认值:false。 默认情况下,读取和写入cookie的时候自动进行编码和解码(使用encodeURIComponent编码,decodeURIComponent解码)。
要关闭这个功能设置raw: true即可。