1. js
之前一般都是后端创建cookie传给前端,前端访问时携带cookie访问,现在想前端创建Cookie,但刚用时走了点弯路,肯定还有其它更多的理论知识没了解到,个人总结暂时如下:
前端代码:
document.cookie = 'timeStamp=' + this.deformation.A+"; path=/test/test02;";//创建后无需其它操作会自动携带Cookie
后端代码
//Controller类的映射地址为"/test"
@GetMapping("/test02")
public void addData2(String temp, HttpServletRequest request) {
System.out.println(temp);
Cookie[] cookies = request.getCookies();
for (Cookie cookie : cookies) {
System.out.println(cookie.getName()+":"+cookie.getValue());
}
}
以下仅个人实践出的结果:
注意点1:path必须写,否则访问时不会携带Cookie,不知是否有这规定,目前并未找到很全的详细说明;
注意点2:path后面的值不用打引号;
注意点3:path用于指定携带Cookie的访问路径;如访问映射地址为"/test"类下的映射地址为"/test02"的处理器方法就可以写成/test/test02,切记不要写成/test/test02/,他的意思代表/test/test02/下的而并不包括test02;
关于其它方面的扩展请看:【w3school—cookies】
另外与此文:【怎样正确的使用Cookie的Path详细解析】有些地方感觉有点矛盾。
补充:
特性:
- 以站点为单位(或者说就是cookie设置的指定可以接收的对象,path的设置);
- 不同浏览器之间,cookie不共用
- 服务器环境下才能设置成功
- 一次只能设置成一个cookie;
1.建立cookie
cookie的实质就是一个字符串像age=18;就是我们要存的键和值,一个cookie中只能有一个键值。向其它的参数如expires是设置过期时间的,默认过期时间是会话结束也就是关闭浏览器。上面的newD.toUTCString是转换为格林威治时间,不然会和指定的过期时间差八个小时。可以自己封装成方法,如下:
2.获取cookie
如上所示,格式和json很相似,但其实是普通字符串,可以采用分割的方法获取值,封装成方法,就可以实现输入键获取值。
2. jq
另外jq封装过方法,简化了很多:如下
原文地址:关于JQ操作cookie的分享
下载与引入: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有效时间,所创建的cookie有效期默认到用户关闭浏览器为止,
所以被称为 “会话cookie(session cookie)”。
2.创建一个cookie并设置有效时间为 7天
$.cookie('the_cookie', 'the_value', { expires: 7 });
这里指明了cookie有效时间,所创建的cookie被称为“持久 cookie (persistent cookie)”。
注意单位是:天;
3.创建一个cookie并设置 cookie的有效路径
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
在默认情况下,只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取
另一个页面设置的cookie,必须设置cookie的路径。cookie的路径用于设置能够读取 cookie
的顶级目录。将这个路径设置为网站的根目录,可以让所有网页都能互相读取 cookie
(一般不要这样设置,防止出现冲突)。
4.读取cookie
$.cookie('the_cookie');
5.删除cookie
$.cookie('the_cookie', null); //通过传递null作为cookie的值即可
6.可选参数
$.cookie('the_cookie','the_value',{
expires:7,
path:'/',
domain:'jquery.com',
secure:true
})
expires:(Number|Date)有效期;设置一个整数时,单位是天;也可以设置一个日期对
象作为Cookie的过期日期;
path:(String)创建该Cookie的页面路径;
domain:(String)创建该Cookie的页面域名;
secure:(Booblean)如果设为true,那么此Cookie的传输会要求一个安全协议,例如:
HTTPS;
关于获取cookies乱码问题:
如果cookie是在后台代码存的,可以用HttpUtility.UrlEncode这个来编码,
如果cookie是在js端存的,可以用encodeURIComponent 这个函数来编码一下
存取完后在通过js端的decodeURIComponent来解码,这样就不会乱码了。
存:
var city_name = encodeURI(encodeURI('郑州市'));
$.cookie("area", city_name);
取:
var city = decodeURI(decodeURI($.cookie("area")))
$('.common-city').html(city) //页面展示当前定位城市名
不知道为什么上面的删除方法好像不太好用,前端删除了后端设置的cookie,但后端还是可以接收到这个cookie,只对前端有效??还是我忽略了什么??
另外补充以下,如果想修改后端建的cookie可以这样:
比如我新建了一个cookie:
Cookie cookie1 = new Cookie("Notemp", "dataA");
cookie1.setPath("/pages/test.html");
response.addCookie(cookie1);
前端修改:
$.cookie('Notemp','dataB');
后端再次获取到的cookie是dataB而不是dataA
3. springboot创建和接收Cookie
可能不太全面但比较清晰的文章推荐:Springboot使用Cookie,生成cookie,获取cookie信息(注解与非注解方式)
其实和原生servlet中是一样的操作。只不过这里多了注解,注解接收不到指定的会出错,怎么跳过应该是可以设置的。
另外关于setpath()方法中路径说一下:
后端我指定的是一个网页页面
@PostMapping("/test01")
public void setCookie(HttpServletResponse response, HttpServletRequest request) {
Cookie cookie1 = new Cookie("Notemp", "dataA");
cookie1.setPath("/pages/test.html");
response.addCookie(cookie1);
return;
}
前端页面访问后端test03处理器方法,处理器方法获取不到这个cookie
@PostMapping("/test03")
public void addData2(HttpServletRequest request) {
Cookie[] cookies = request.getCookies();
for (Cookie cookie : cookies) {
System.out.println(cookie.getName() + ":" + cookie.getValue());
}
}
前端用jq是可以获取的
alert($.cookie("Notemp"));//dataA
console.log($.cookie("Notemp"))//dataA
再如:我设置的路径如下cookie1.setPath("/test/test03");
那么前端获取不到这个cookie,但test03方法可以获取到。